Setting an Element s Margins

Setting an Element's Margins

The margin shortcut property (Table 6.2) of an element allows you to set the space between that element and other elements in the window by specifying one to four values that correspond to all four sides together, the top/bottom and left/right sides as pairs, or all four sides independently.

Table 6.2. Margin Values
VALUE	COMPATIBILITY
<length>	IE3, FF1, S1, O3.5, CSS1
<percentage>	IE3, FF1, S1, O3.5, CSS1
auto	IE3, FF1, S1, O3.5, CSS1

In this example (Figure 6.7), margins have been added to accomplish two things: to set off the navigation block so that it isn't pressed against the header, and separate by 8 pixels the drop box from the copy it is floating in. In addition, a negative margin has been set for the ol tag to pull the numbered list to the left.

Figure 6.7. Margins are used to add space between different elements, providing more white space and making the page easier on the eye.

To define the margins of an element:

margin:

Start your declaration by typing the margin shortcut property name, followed by a colon (:), in the declaration block (Code 6.4).

Code 6.4. Set the margin on all four sides the same or each one individually.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting an Elements Margins</title>        <style type="text/css" media="screen"> <!-- body {      font-size: 1em;      font-family: Georgia, "Times New Roman", times, serif;      color: #000000;      background-color: #fff;      margin: 8px; } h1, h2 {      color: #999;      margin: 0em 0em .5em; } h2 {      clear: both; } img {      margin: 4px;      display: block; } form {      margin: 4px 0px; } #navigation {      margin: 0px 8px 8px 0px;      background-color: #ccc;      float: left;      font: small Arial, Helvetica, sans-serif; } # navigation a {      display: block;      color: red; } # navigation a:hover {      background-color: #fff; } # copy p {      margin: 1em 5em; } .author {      margin-top: 0cm;      font: bold 1em Arial, Helvetica, sans-serif;      } .chapterTitle {      display: block;      font-size: smaller;      color:black; } .dropBox {      margin-top: 0px;      margin-right: 0px;      margin-bottom: 8px;      margin-left: 8px;      float: right;      font: xx-small Arial, Helvetica, sans-serif; } --></style>      </head>      <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <form action="#" method="get" >      Search Book:      <input  type="text" name="searchTerm" size="24" />      <input  type="submit" name="findSearchTerm" value="Find" /> </form> <h2>CHAPTER II      <span >The Pool of Tears</span> </h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice07a.gif" height="236" width="200" alt="Alice in Wonderland" /> Alice is drowning in a pool of her own making. </div> <p>'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment  she quite forgot how to speak good English); 'now I'm opening out like the largest  telescope that ever was! </p> </div> </body> </html>

0px 8px 8px 0px;

Now type a value for the margin, which can be any of the following:

A length value
A percentage, which creates a margin proportional to the parent element's width
auto, which returns control of the margins to the browser's discretion

You can enter between one to four values, separated by spaces, to define the margins as follows:

One value sets the margin for all four sides.
Two values set the top/bottom margins and left/right margins.
Three values set the top margin, the left/right margins (the same), and the bottom margin.
Four values set each individual margin, in this order: top, right, bottom, and left.

margin-top: 5em;

You can also set the margin for just one side of the box independently without having to worry about the other three margins. This is especially useful when used with an inline style to override margins set elsewhere. To do this, just specify the margin side you want to define (top, bottom, left, or right) and a legitimate margin value.

Tips

You can also set margins for the <body> tag, in which case they define the distance at which elements nested in the body should appear from the top and left sides of the browser window. In theory, this would allow you to center the content of a page by setting the margins on both sides to auto. However, setting margins for the <body> tag tends to be buggy in Internet Explorer for Windows in version 5.5 and earlier and in version 6 if you are using Quirks mode.
When setting proportional margins, be aware that you might get very different results depending on the size of the user's window. What looks good at a resolution of 640 x 480 might be a mess at larger screen sizes.
The browser has a default margin it adds to the body of your page so that the content doesn't immediately begin at the edges of the screen. However, the default is not the same on all browsers, which can be a problem when you position your elements on the page (discussed in Chapter 7). So it's a good idea to set the margins in the body tag so that they remain consistent.

Setting Negative Margins

Although you can use negative margins (for example, margin:-5em;) to create interesting effects for overlapping pieces of text, this method is frowned upon because various browsers present different results.

Overlapping text is better achieved with CSS positioning (see Chapter 7).

Be careful when setting negative margins around a hypertext link. If one element has margins that cause it to cover the link, the link will not work as expected.