CSS: Margin And Padding Properties

CSS provides two properties that allow designers to add whitespace around HTML elements. These properties are called 'margin' and 'padding'. Margin and padding in CSS is extra blank space around your content. Without margin or padding, all your content would get jumbled together.

You may be asking yourself, why do we need two properties to create this extra space around HTML elements? Simple! While both properties are strikingly similar, there is one key difference between them.

Padding defines the whitespace around an HTML elements border and the HTML element's content. Margin on the other hand, controls the whitespace from the border outwards (i.e in relationship to other HTML elements).

To better illustrate the differences between margin and padding, see the image below:

Everything in the blue is the actual content (i.e paragraph text). The grey area is the border and everything in white is margin.  Just like in our Border Properties page, margin and padding both have properties that can affect the amount of whitespace on every side of the HTML element. That is why you see '-top', '-bottom', '-left'  and '-right' at the end of each root property ('padding', border' and 'margin').

NOTE: The 'background-color' property is extended only until the border of the element is reached.

To sum up the differences with practical guidance, if you want to "push" the border away from the content, you would use padding. If you want to "create" space between paragraph elements (<p>), you would use padding.

Using The '-direction' Suffix

Just as you can define borders for each side of your HTML elements, you can do the same with both the margin and padding properties. All you need to do is add '-top', '-bottom', '-left'  or '-right' to the end of either the 'margin' or 'padding' property.

p {border: 1px solid; margin-left: 20px padding-top: 30px;}

This paragraph has a 1px border, 20px of margin space on the left and 30px of padding on the top.

Notice that the 30 pixels of padding on the top "pulled" the border higher up while the 20 pixels of margin on the left "pushed" the paragraph (and the border) further right.

Using The Shorthand Method

Again, just like the Border Properties page, there is a shorter way to add both margin and padding. From reading the earlier page on borders, can you guess what it is? Right, it's the 'margin' and 'padding' properties without any added suffixes. Most web designers don't create four different rules to give each side of their HTML elements the same, consistent look. They simply use one property and "feed" it multiple values.

A multi-valued 'margin' property would something like:

p {margin: 5px 10px 15px 20px ;}

Now this may seem difficult to understand, but it is actually pretty simple. First off, each of the four pixel values are for each side of the HTML element. The first value (5px) is for the top and the numbers move clockwise with the right side (10px), the bottom (15px) and the left side (20px).

You can even make it even simpler by using just one value for all sides:

p {margin: 15px;}

This will make every side have 15 pixels of margin.

Permalink