HTML and CSS Reference
In-Depth Information
For those elements that require a different font size, such as headings, the property can be set specifically
(Listing 5-67), and all the other elements inherit the default font size set for the document body. Consequently, there
is no need to declare the font size for, say, all p and div elements, if the desired font size for them is the default one,
because the property is inherited from the body element.
Listing 5-67. Specific Declarations That Override the Default Font Size Set in the Previous Listing
h1 {
font-size: 1.4em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
The Box Model
The actual markup content of block elements is wrapped around by optional paddings , borders , and margins , called the
CSS box model (Figure 5-2 ) [20]. These rectangular boxes are generated for certain markup elements in the document tree.
Top margin
Top border
Top padding
Content
sample
Width
Bottom padding
Bottom border
Bottom margin
Figure 5-2. The CSS box model
Text and images appear in the content. The padding clears the area around the content. The padding is affected
by the background color of the box similar to the border area around the padding. The margin is the outermost area
around the border. It has no background color and is transparent. The size of each area can be determined by CSS
properties. Since they are optional, they can also be collapsed to 0 (that is, totally eliminated).
The margins of two vertically adjacent block elements normally collapse into one another; that is, a margin is
rendered according to the size of the larger bottom margin of the first box and that of the top margin of the other below it.
 
Search WWH ::




Custom Search