HTML and CSS Reference
In-Depth Information
Input
▼
.outer { border: 2px solid black;
background-color: gray;
padding: 15px; }
.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
margin: 15px; }
body { margin: 20px;
border: 3px solid blue;
padding: 20px;
background-color: yellow;
8
.
Output
FIGURE 8.8
Treating the body
of a document as
a box.
In this example, you can see that you can adjust the margin, padding, and border of a
document's body. However, unlike other boxes, the background color is applied to the
margin as well as the padding.
Controlling Size and Element Display
The one box in the box model I haven't discussed is the content box. For starters, there
are two types of content boxes: block and inline. In previous lessons, I've discussed
block-level elements versus inline elements—this distinction is important in CSS. Block
elements are, by default, as wide as the container you place them within, and you can
modify their height and width using CSS. Block elements are also preceded and followed
by line breaks. Inline elements are only as wide as they need to be to display their con-
tents, as well as the margins, borders, and padding that you apply to them.
Each element is, by default, either a block element or an inline element, but CSS pro-
vides the
display
property to allow you to change this behavior. The block property sup-
ports three values:
block
,
inline
, and
none
. For example, if you want the elements in a
list to appear inline rather than each appearing on its own line, as shown in Figure 8.9,
you use the following style:
ul.inline li { display: inline }
