Here are the styles for this DIV which has margins set for all 4 sides.
We can see the margin effect on the left and right sides because this DIV has horizontal space that exceeds the padding for the content DIV.
Margins, which are part of an element box, are transparent. We know this because we see the yellow background of the content DIV through the margins of this box.
.divWithMargin {
border: 1px solid #333;
background-color: #dee7ec;
width: 660px;
margin: 30px auto 30px auto;
padding: 15px;
}
A couple of things to note here. First, since DIV element boxes have a default margin of 0 -
if no margins were set, then this element box would be as wide (visibly) as the
"content"
DIV
element it is
contained within.
We can see the margin effect on the left and right sides because this DIV has horizontal space that exceeds the padding for the content DIV.
Margins, which are part of an element box, are transparent. We know this because we see the yellow background of the content DIV through the margins of this box.
Here are the styles for these two DIVs:
The blue inner DIV also has a 40 pixel margin. The element box of the blue inner DIV is exactly the same size as the gray visible box of the outer DIV, but because margins are transparent we see a gray margin around the blue "visible" region of the inner box. Though we are actually looking at the element box for the blue inner DIV, we are able to see the gray visible box of the outer DIV because of margin transparency.
.outerDiv {
margin: 40px;
background-color: #888;
border: 1px solid black;
}
.innerDiv {
margin: 40px;
padding: 15px;
background-color: #dee7ec;
border: 1px solid black;
}
The gray outer DIV has a margin of 40 pixels. It is offset visibly in the #content DIV and the yellow background of the #content DIV shows through the margins of the outer DIV, because margins are always transparent ... even though
the margin is part of an element box's total 'size'.
The blue inner DIV also has a 40 pixel margin. The element box of the blue inner DIV is exactly the same size as the gray visible box of the outer DIV, but because margins are transparent we see a gray margin around the blue "visible" region of the inner box. Though we are actually looking at the element box for the blue inner DIV, we are able to see the gray visible box of the outer DIV because of margin transparency.