So far we have examined the following:
- the containing block - the ancestor box that governs the size and positioning of descendant boxes
- the
widthproperty which sizes only the content portion of a box - the visible portion of a box which is defined as:
the content area (width property) + any optional padding + any optional borders
...but we're not done yet!
Margins Are Part of the Box Model Too!
In terms of the element box, there is more to consider than just the visible portion of the box.
An element box, according to the 'complete' box model includes all of the following:
- the content area as defined by the
widthproperty - any
paddingvalues - any
bordervalues - all
marginvalues
Dealing with margins may be a little trickier than dealing with the visible portion of a box simply because we cannot actually see margins.
Margins Are Invisible
Margins are not seen. Margins do occupy space around a box and we can observe the void that they produce. Their presence helps to communicate meaning within our layout. But margins, themselves, are never colored or otherwise visible.
As already established, margins are transparent. This makes sense because the purpose of margins is to affect how far an element is indented, or otherwise separated, from other elements. There is no content of any kind in the margin area.
For example, if your goal is to make an element appear to be 'indented' you can use margins to achieve this effect. In this scenario you do not want the actual outer edge of the element box to be seen. That would ruin the whole effect. If the margin area assumed the background color of the 'indented' element... well, then it would look about the same as if you had used padding.
#marginExample {
width: 600px;
border: 1px solid black;
padding: 5px;
background-color: #DDD;
margin-left: 25px;
}
25px so that it will appear indented from the left side of its containing block. Margins Are Included in the Size of an Element Box
Understanding margin transparency is very useful. But even more important is the fact that the total size of an element box includes margins.
To calculate the total size of our element box example above:
width property (content area) + padding + borders
+ margins
600px + 2px + 10px + 25px = 637px
The total width is 637px. If we are going to succeed in putting this element box inside a containing block, the content width of the containing block must be at least 637px wide. More on this shortly.
Note: On p. 111 of the Stylin' textbook, the author states the following:
The way the above statement is worded may be a bit confusing. When the author says 'outside of the box' he is referring to margins being outside of the visible box. Margins are most definitely included in the total size of an element box!
Adding margin values does increase the total size of an element box. Margins do not increase the visible portion of an element box and that means we must exercise vigilance so that we remember to consider margins in addition to what we can see. 'Out of sight, out of mind' is a bit of a danger here but something we must try to overcome!
Again, the total size of an element box is the sum of:
The width property (content area) + padding + borders + margins.