CSS Margins Tutorial
View more Tutorials:
CSS Margin is used to create a space around an element, outside the element borders.

By standard syntax you need to provide 4 values for margin:
/* Syntax: */ margin: top right bottom left; /* Example: */ margin: 5px 20px 30px 40px;
Instead of providing 4 values for CSS margin you can use 4 properties: CSS margin-top, margin-right, margin-bottom, margin-left.
margin-top: 5px; margin-right: 20px; margin-bottom: 30px; margin-right: 40px;
CSS margin can also accept 1, 2 or 3 values
/* Apply to all four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin: 5px 10px; /* top | horizontal | bottom */ margin: 10px 20px 30px;
Values can be given to CSS margin:
auto | Browser will automatically calculate margin for element. |
% | Specify a value in% for margin, which is % relative to the width of the nearest ancestor Block-level Element containing the current element. See also the explanation at the end of this post. |
px, cm, em,.. | Specify a specific value in px, cm, em,.. units , for example, 10px, 2cm, 3em,... |
inherit | The values of margin will be inherited from a parent element. |
CSS margin accepts percentage value (%). This value is percentage relative to the width of the Containing Block, of which, the Containing Block is the nearest ancestor Block-level element that contains the current element.
margin-percent-example.html
<!DOCTYPE html> <html> <head> <title>CSS Padding</title> <meta charset="UTF-8"/> <script> function changeParentSize() { var blockDiv = document.getElementById("blockDiv"); // offsetWidth = contentWidth + padding + border var offsetWidth = blockDiv.offsetWidth; if(offsetWidth > 300) { offsetWidth = 200; } blockDiv.style.width = (offsetWidth+1) + "px"; } </script> </head> <body> <h3>CSS Margin Percentage</h3> <div id="blockDiv" style="width:200px; height: 150px; border: 1px solid blue"> I am a div (Block-Level Element) <br/> <span style="background-color: yellow;"> I am a span (Inline Element) <div id= "redDiv" style="width:100px; margin:10%; border:1px solid red;"> width:100px; margin:10%; </div> </span> </div> <br/> <button onClick="changeParentSize()">Change size of 'blockDiv'</button> </body> </html>

CSS margin accepts auto value. This is a good solution when you want to align elements in the middle horizontally.
margin-auto-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin</title> <meta charset="UTF-8"/> <style> .center-div { width: 150px; background-color: LightCyan; padding:10px; margin-left: auto; margin-right: auto } </style> </head> <body> <h3>CSS Margin auto</h3> <div class="center-div"> margin-left: auto; <br/> margin-right: auto; </div> </body> </html>
Note: CSS margin vertically (margin-top & margin-bottom) doesn't have effect on Inline Element. For example, by default <span> is an inline element, vertical margins have no effect on it.
margin-inline-element-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin</title> <meta charset="UTF-8"/> <style> div { background-color: yellow; } span { margin-top: 100px; margin-bottom: 100px; margin-left: 20px; margin-right: 20px; background-color: #eee; } </style> </head> <body> <h3>CSS Margin for Inline Element</h3> <div>I am a div</div> <span> I am a span. margin-top: 100px; margin-bottom: 100px; margin-left: 20px; margin-right: 20px; </span> <div>I am a div</div> </body> </html>
If you want vertical margin to work with an inline element, you have to turn it into a Block-Level Element or an Inline-block Element.
span { display: block; } /* OR: */ span { display: inline-block; }
The bottom and top margins of two adjacent Block-level elements sometimes combine each other to form a single margin having the size which is the largest size of the two above margins. This behavior is referred to as margin collapsing. Note: margin collapsing does not occur with the elements that have {float:left|right} or {position:absolute}.

Margin collapsing with participation of many elements:

margin-collapsing-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { border:1px solid green; } button { margin-top:10px; } </style> <script> function addDiv2MarginTop(delta) { var div2 = document.getElementById("div2"); var style = window.getComputedStyle(div2); var marginTopString = style.marginTop;// 20px var marginTopInt = parseInt(marginTopString.substr(0,marginTopString.length-2)); // 20 var newMarginTopString = (marginTopInt + delta) + "px"; div2.style.marginTop = newMarginTopString; div2.innerHTML = "height:50px; margin-top: " + newMarginTopString; } </script> </head> <body> <h3>CSS Margin Collapsing</h3> <div style="height:50px; margin-bottom:50px"> height:50px; margin-bottom:50px; </div> <div style="height:50px; margin-top:40px" id="div2"> height:50px; margin-top:40px </div> <button onClick="addDiv2MarginTop(3)">Div2 margin-top (+)</button> <button onClick="addDiv2MarginTop(-3)">Div2 margin-top (-)</button> </body> </html>
If two block-level elements are adjacent, they will cause marginal collapsing (See the above example ). But if the second element is established CSS {float:left|right}, margin collapsing will not occur.

floating-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { border:1px solid green; } p { color:red; font-style:italic; } </style> </head> <body> <h3>CSS Margin Collapsing</h3> <p>Margin Collapsing does not work with {float:left|right}</p> <div style="height:50px; margin-bottom:50px;"> height:50px; margin-bottom:50px; </div> <div style="height:50px; margin-top:40px; float:right" id="div2"> height:50px; margin-top:40px; float:right; </div> </body> </html>
Parent element and child elements.
If the parent element has no border, padding, and the first child element is a Block-level element having no {float:left|right}, margin collapsing will occur for the margin-top of this child element and other element outside the parent element.
margin-collapsing-example2.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { background: lavender; } p { margin-top: 30px; margin-left: 15px; margin-right: 15px; background: yellow; height: 30px; } </style> </head> <body> <h3>CSS Margin Collapsing (Parent and First Child)</h3> <div style="margin-bottom:15px;">This is a div {margin-bottom: 15px;}</div> <div style="min-height:50px;"> <p> Child Paragraph 1 - margin-top: 30px; </p> <p> Child Paragraph 2 - margin-top: 30px; </p> This parent element contains two paragraphs! </div> </body> </html>
If the parent element has no border, padding, and the last child element is a Block-level element without {float:left|right}, margin collapsing will occur with the margin-bottom of this child element and other element outside the parent element.
margin-collapsing-example3.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> <style> div { background: lavender; } p { margin-bottom: 30px; margin-left: 15px; margin-right: 15px; background: yellow; height: 30px; } </style> </head> <body> <h3>CSS Margin Collapsing (Parent and last Child)</h3> <div style="min-height:50px;">This parent element contains two paragraphs! <p> Child Paragraph 1 - margin-bottom: 30px; </p> <p> Child Paragraph 2 - margin-bottom: 30px; </p> </div> <div style="margin-top:15px;">This is a div {margin-top: 15px;}</div> </body> </html>
Empty element.
If an element is an empty block without border, padding, height, min-height, then its margin-top and margin-bottom will collapse into a value.
empty-block-example.html
<!DOCTYPE html> <html> <head> <title>CSS Margin Collapsing</title> <meta charset="UTF-8"/> </head> <body> <h3>CSS Margin Collapsing (Empty block)</h3> <div style="height:40px; background-color: yellow;"> height:40px; </div> <div style="margin-top:40px; margin-bottom:50px;"> <!-- This is Empty Block --> <!-- No border, padding, height, min-height --> </div> <div style="height:50px; background-color: yellow;"> height:50px; </div> </body> </html>
Note:
If a negative margin is involved in margin collapsing, then the margin value used will be the sum of the largest positive margin and the most negative margin.