CHAPTER 12. BOX MODEL 136
12.5 Box Math: Ultimate Size
The ultimate width and height used by a paragraph or picture depends on
(a) the basic size of the central object, plus (b) the thickness of the padding,
plus (c) the thickness of the border, plus (d) the thickness of the margin.
Outline thickness does not have any effect. Collapsing vertical margins may
allow adjacent margins to overlap each other.
Example: The central object is an image that is 200px wide and 100px tall.
We have the following style sheet. What is the final size rendered?
img { padding: 10px 20px 30px 40px;
border: 15px 25px 5px double black;
margin: 9px 6px;
outline: 13px red dotted; }
Vertically, we have 100px in the image. On top we have 10px padding, 15px
border, and 9px margin. On the bottom we have 30px padding, 5px border,
and 9px margin. Outline does not count. The total is 100 + 10 + 15 + 9 +
30 + 5 + 9 = 178 pixels.
Horizontally, we have 200px in the image. On the right we have 20px
padding, 25px border, and 6px margin. On the left we have 40px padding,
25px border, and 6px margin. Outline does not count. The total is 200 +
20 + 25 + 6 + 40 + 25 + 6 = 322 pixels.
Because box math is painful, thebox-sizing: border-box;model is in-
creasingly popular. It just seems to make lots of things easier.
12.6 Float and Clear
Everything on a webpage is organized into boxes, and is surrounded by
padding, border, (outline,) and margin. Normally the larger boxes are just
stacked vertically on the page. (Characters and words stack horizontally
within the paragraph.)
Float lets the big things stack differently.
For example, say you want to have an image displayed next to some text.
You actually want the text to flow around the image. How can you do that?
In section 10.1.1 (page 99) we introduced this idea. We showed that you