HTML and CSS Reference
FIGURE 3-5 Inline-block elements.
It should be noted that inline-block elements, if aligned vertically to the top, also work well in the
case of multiple rows of different heights. When not floating, in fact, the browsers always use a single,
logical horizontal line to render on.
The drawback of inline-block elements is that they consider any literals in the HTML source. This
means that blanks you have in the source (in case of fixed widths) may cause an undesired wrap to the
next line. To be on the safe side, you should consider writing your HTML on a single line with no extra
blanks or carriage returns. This may be required only for the section of the page that uses elements
styled as inline-blocks.
Note As the content of Figure 3-5 may suggest, inline-block elements may be very helpful
to arrange the style of the Windows 8 user interface using HTML and CSS.
Spacing and the boxing model
CSS builds a relatively rich and articulated infrastructure around each HTML element. This
infrastructure is known as the boxing model and is featured in Figure 3-6.
FIGURE 3-6 The CSS box model.
The boxing model defines what browsers expect to find around each single HTML element. The
first surrounding box is the padding box, and it is controlled by the padding property. Next, there's
the border box used to frame an element; border settings are controlled via the border property.
In addition, each element can be placed in another larger box, known as the margin box. Margins
are controlled by the margin property and determine the distance between the boxed element and