Margins handle the space between an element and things around it. A margin is generated outside the element, so it does not contribute to the size of the element itself like padding does.
Keep in mind that if the size of your element matters in your layout design, you still need to consider how much room both the element and the space around it will take up. Click through the tabs below to learn more about margins.
As far as syntax, margin is handled very similarly to padding. Its measurement can be set to pixels or percentage, and you can specify one side of the element using a hyphen and the direction.
Without Margins
With Margins
Without Margins
<div style="width:100px; height:100px; padding:20px; background-color:#555555;">
<img src="dog.jpg" alt="dog wearing glasses"/>
</div>
With Margins
<div style="width:100px; height:100px; padding:20px; background-color:#555555; margin:20px;">
<img src="dog.jpg" alt="dog wearing glasses"/>
</div>
Like with padding, you can call out specific sides of the margin individually.
margin-top:20px;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
A helpful thing about the margin property is that you can use it to center elements that have set widths. The margin property has an available value of auto, which will horizontally center items in the containing element by calculating the remaining space and splitting it equally between the left and right margins.
<div style="width:100px; height:100px; padding:20px; background-color:#555555; margin: auto;">
<img src="dog.jpg" alt="dog wearing glasses"/>
</div>
Typical margin behavior tells us that if you have one element with a margin-right set to 20px and a second element next to it with a margin-left of 20px, these values will add together; and there will be a total of 40px of space between the two elements.
However, when it comes to margins above and below elements, things can get a little weird. Any elements that adjust their height based on the content inside them are known as block elements. These include paragraphs, headers, and divs--all elements that, by default, go the full width of the screen and start on their own line. When it comes to block elements, competing margins above and below each other will collapse.
Example
If you have one paragraph with a margin-bottom of 20px above another paragraph that has a margin-top of 20px, there will be 20px of space between them, not 40px. So, why does this happen?
It comes back to block elements having height that adjusts automatically based on their content. Additionally, block elements like paragraphs and headers have default margins above and below themselves to put space between blocks of text. If this collapsing behavior didn't happen, there'd be a lot of extra space between paragraphs.
The top and bottom margins of competing block elements will always go with the higher value.
<p style="margin-bottom:20px;">Paragraph 1</p>
<p style="margin-top:20px;">Paragraph 2</p>
Paragraph 1
Paragraph 2
So if you need a margin of 40px between two paragraphs, don’t set each one to a value of 20px. Set just one of them to 40px.
<p style="margin-bottom:40px;">Paragraph 1</p>
<p>Paragraph 2</p>
Paragraph 1
Paragraph 2
You Try!
Using your own text editor or the coding space below, apply margins to various elements and see how they interact.
