Block-level elements can behave in sometimes predictable, sometimes surprising ways. The handling of element placement along the horizontal and vertical axes can differ, for example. In order to fully understand how block-level elements are handled, you must clearly understand a number of boundaries and areas. They are shown in detail in Figure 7-2.
Figure 7-2. The complete box model
In general, the
an element is defined to be the distance from the left inner edge to
the right inner edge, and the
height is the
distance from the inner top to the inner bottom. Both of these
properties can be applied to an element.
The various widths, heights, padding, and margins all combine to determine how a document is laid out. In most cases, the height and width of the document are automatically determined by the browser and are based on the available display region and other factors. Under CSS, of course, you can assert more direct control over the way elements are sized and displayed. You can select different effects for horizontal and vertical layouts, so we’ll tackle them separately.
Horizontal formatting is
often more complex than you’d think. Part of the
complexity has to do with how
width affects the width
of the content area, not the entire visible
element box. Consider the following example:
<p style="width: 200px;">wideness?</p>