CSS Padding Property – Adding space inside an element

CSS

0 Comments

The padding property adds more space around the text inside an element.

Example

<style>
	.btn {
        /* other code hidden to save space */
		...

		padding: 8px 15px;
	}
</style>

<input type="button" class="btn" value="Button 1">
<input type="button" class="btn" value="Button 2">

Result

padding property (Line 6)
Give 8px of padding above/below the text inside the button and 15px on the left/right.
If an element has a border, padding adds more space inside the border. This is different than margin, which adds space outside of the border.

Different ways to specify padding

Note: Padding has the same syntax and shortcuts as margin, so if you understand all the ways to specify margin, you can skip this section.

padding-top
Add space at the top (inside the element).
padding-bottom
Add space at the bottom.
padding-right
Add space on the right.
padding-left
Add space on the left

Shortcuts (to specify all of these at once):

.btn {
    /* Give 10px of space on every side */
    padding: 10px;

    /* top, right, bottom, left */
    padding: 10px 20px 30px 40px;

    /* 10px for top/bottom and 20px for left/right */
    padding: 10px 20px;

    /* 10px for top, 20px for left/right, 30px for bottom */
    padding: 10px 20px 30px;
}

Practice in Editor

Leave a Comment