CSS Padding Property – Adding space inside an element



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


	.btn {
        /* other code hidden to save space */

		padding: 8px 15px;

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


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.

Add space at the top (inside the element).
Add space at the bottom.
Add space on the right.
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