HTML and CSS Reference
In-Depth Information
Containers.
When you look at your document, it is composed of a number of con-
tainers. The
<body>
tag is a container and it may contain a heading, a paragraph, a table,
or other elements. Each of these elements also can be thought of as a container. The
<div>
tag is another special type of container used to define logical divisions with the
content of a page. You can use the
<div>
tag to center a block of content or position a
content block in a specific place on the page.
Margins, Padding, and Borders.
Each container has an outer margin, and the
margin can have some padding (space between it and the next container). The padding
is like the CELLPADDING attribute of a table cell. On the inside of the padding is a bor-
der that separates the container from its contents. The border is normally invisible. You
can change the margin, create colorful borders, or increase or decrease the padding, to
give the page more style. See Figure 14.9 for a graphic representation, and Table 14.10
for a list of margin and border properties. Different browsers might handle the borders
differently. Margins and borders will behave better if enclosed within
<div>
tags.
margin
padding
content
border
Figure 14.9
How an element is contained.
Table 14.10
Margin and Border Properties
Elements
Affected
Property
Value/Example
border-bottom
<border-bottom-width> or <border-style> or <color>
All
border-bottom-width
thin, medium, thick, 2em
All
border-color
red, green, #0C0
All
border-left
<border-left-width> or <border-style> or <color>
All
Continues
