CSS Padding

The CSS padding property is used to add space inside an element or around the content of the element. Take a quick look at the following example.

If we apply the following CSS:

.box{
    padding: 50px;
    background: blue;
    color: white;
}

To the following element:

<div class="box">CSS Padding Example</div>

We would end up with the following result:

CSS padding property

And as you can see we have a padding of 50 pixels inside of the element and around the content.

CSS padding works the same way as CSS margins. If we specify 1 value it will add the padding to all sides of our element. Specifying 2 values will add the padding to the top-bottom and left-right, finally 4 values will apply padding to the top, right, bottom, and left side respectively.

Next, let’s move on to talking about the CSS width and height properties.