Chapter 12: Advanced Cascading Style Sheets
265
Figure 12-2: Margin spacing dramatically changes the appearance of text. Compare the margins surrounding each paragraph.
So that you don’t think that margins only create mass confusion on your page, try to visual ize the result of the following set of styles: <STYLE TYPE=”text/css”>
BODY { margin: 1cm; }
P { margin-left: 1cm; }
H1 { margin-left: -5mm; }
H2 { margin-left: -5mm; }
</STYLE>
If you’re imagining an attractive indented paragraph format with headers that outdent, you’re right!
note
Did you notice the margin-left attribute in the last example? If you don’t want to use the margin shorthand, you can specify any (or all) of the four margin values for a container by using margin-left, margin-right, margin-top, and marginbottom.
Borders The best way to understand the different containers is to draw a box around them all—literally. As you saw in Figure 12-1, every container includes three elements: an external margin, a border, and an internal padding.