Share this Page URL

Chapter 16. The Box Model: Styles for Di... > Room to Breathe: Specifying Margins ... - Pg. 186

The Box Model: Styles for Dimensions, Borders, Margins, and More 186 Room to Breathe: Specifying Margins Around the Box For our next style sheet trick, I show you how to use styles to specify margins. The default margins used by the browser depend on what element you're dealing with. For example, each new paragraph creates a bit of margin space above itself, and you always get a little bit of space at the top and bottom of the page, and on the left and right sides of the page. On the other hand, <DIV> sections don't use margins. To control all this, use any of the following margin properties: · margin-top--Specifies the size of the top margin. · margin-right--Specifies the size of the right margin. · margin-bottom--Specifies the size of the bottom margin. · margin-left--Specifies the size of the left margin. · margin--Specifies the size of all the margins, in this order: margin-top, margin-right, margin- bottom, and margin-left. Separate each property with a space, or use a single value for all four margins. In each case, set the width to a specific value (such as 0px for no margin). The following HTML code (ssmargin.htm on the CD in this book) sets two different margins (see Figure 16.5): · A <STYLE> block sets the margins of the <BLOCKQUOTE> tag to be 100 pixels on the left and right. · The <BODY> tag's STYLE attribute sets the overall margins of the page to 0 for the left, top, and right. As you can see in Figure 16.5, Internet Explorer handles this perfectly, but Netscape 6 ignores the margin-top property (and Netscape 4 doesn't support messing with the <BODY>