CSS Padding and Margin

The padding and margin properties are used to control space. The margin controls the outside space of an element and the padding controls the inside space.

Padding

The padding will specify the space inside an element. If you increase the space it will be further away from the border, and if you decrease it the opposite will happen. Take this example with no padding:

t cursus. Proin pellentesque nunc sit amet mi tincidunt non imperdiet lorem accumsan. Nunc quam diam, tempor vitae mollis eget, mattis sit amet tellus. Aliquam nec dui nulla, id hendrerit erat. Etiam facilisis congue nisi, id cursus sapien imperdiet in. Fusce ac arcu lectus, ut iaculis urna. Vestibulum orci massa, sollicitudin consectetur condimentum id, imperdiet non ligula. Maecenas gravida tristique lacus imperdiet sagittis. Donec semper, lorem at semper tincidunt, orci neque adipiscing metus, et congue massa libero quis turpis. Nulla eget pharetra arcu. Vestibulum ac sodales nunc. Duis dictum tortor sit amet dolor iaculis ut tempor leo congue. Aenean an

You can see how the content touches the border.

Syntax

selector {padding:integer px or %}

It is preferable to use px or %.

Example

div {padding:10px;}

Output

Here you can see how the content is more spaced out and is not touching the border. This padding property applies the padding all over: top, bottom, right and left. You can avoid this and only apply it to the top or bottom.

Example

div {padding-left:10px;}

This applies the padding to the left only, and you can do the same for the top, bottom and right. Simply change padding-left to padding-top, right or bottom.

Output

You can see the content does not touch the left border but is still very close to the top and bottom.

Margin

The margin will specify the space outside of an element and how far or near it is to surrounding elements. Take this example:

You can see how the black div is touching the red div. They are both close to each other, however we can apply a margin to the black div and make some space.

Example

div {margin:10px;}

Output

They are clearly separated now, and we also applied a padding to the black div of 10 pixels. Like before, you can also have margin-left, right, top or bottom.

Short-Hand

You can use CSS short-hand to type fewer properties. For example, take something something like this:

padding-left:10px;
padding-right:10px;
padding-top:2px;

You can instead do this:

Example 1

padding: 2px 10px 0 10px;

The order is top, right, bottom left. You can do the same for the margin property.

Example 2

margin: 5px 10px;

This applies 5px to margin top and bottom and 10px to margin left and right. The same can be done for padding.