HTML and CSS Reference
In-Depth Information
Chapter 16
Box model
The so-called box model of CSS describes the space that is taken up by an HTML element.
In this model, each element consists of four boxes: content, padding, border, and margin,
as illustrated in Figure
16-1
.
Figure 16-1.
CSS box model
Each of the three boxes surrounding the content can have different sizes on the top,
right, bottom, and left of the element. Any or all of these sizes can also be set to zero.
Inline and block
HTML has two primary categories of elements: block and inline. The box model applies
differently to these two kinds of elements, so it is important to know the difference
between them. Examples of inline elements include
<a>
,
<strong>
and
<em>
, while
<p>
,
<h1>
, and
<form>
are block elements.
Inline elements flow along with text content and are split as necessary to fit the width
of their container. They may not contain block elements, with the exception of the
<a>
element, which can wrap any type of element.
Block elements can contain both block and inline elements (see Figure
16-2
). They
break the flow of text by creating a virtual box around themselves that expand horizontally,
making it appear as if there are line breaks before and after each block element. Because of
these properties, block elements are also referred to as boxes or containers.
