Putting Style Sheets in Perspective margin-property

Initial Value: 0 Allowed Values: length percentage auto {1,4} inherit Applies to: all elements Inherited?: no Percentages? Refers to parent element width

Web pages not only look better with a little white space in the margins, but it's less tiring to read shorter lines than it is to read lines that span the entire screen. Developers have resorted to every trick they could think of to achieve margins - from tables, to transparent gif spacers. Some have even created whole pages as a gif file, putting their text into the graphic. CSS has covered this aspect of design with the margin-property.

Margins may be applied to all block elements, and may be specified for an entire document by applying them to the BODY element. This page has the BODY properties set to a white background with a wide red border. The three boxes below demonstrate the nesting effect created by applying the same margin-left value to all three paragraphs and placing one inside the other via the DIV tag. An image of the effect is provided for those who don't have CSS capable browsers.

.ex1    {
        color           : black;        
        background      : #E6E6FA;
        border          : .5em solid #330099;
        margin-left     : 75px;
        }       

.ex2    {
        color           : black;
        background      : #FFFFFF;
        border          : solid;
        margin-left     : 75px;
        }

.ex3 {
   color        : black;
   background   : #E6E6FA;
   border       : .5em solid #330099;
   margin-left  : 75px;
   }

                <DIV class="ex1">
                        Document content.
                <DIV class="ex2">
                        Document content.
                <DIV class="ex3">
                        Document content.
                </DIV></DIV></DIV>

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Top, right, bottom and left margins may be set independently of each other.

Note: In some browsers, the line below that states "Be careful you don't extend your content right off of the page when using negative values!" will actually run off of the page so that the beginning of the sentence is lost!

.ex5    {                                       
        color           : black;
        background      : #FFFFFF;
        border          : solid;
        margin-left     : -75px;
        }

.ex6 {
        color           : black;
        background      : #FFFF66;
        border          : .5em solid #CC9933;
        margin-left     : 75px;
        margin-right    : 100px;
        }

margin

The margin property is shorthand for setting all four margin sides at the same time.

• If there is one value, it is applied to all four sides
• If there are two values, the first is applied to the top and bottom, the second is applied to the left and right sides.
• If there are three values, the first is applied to the top, the second value is applied to the left and right sides and the third is applied to the bottom.
• Four values are applied to the top, right, bottom and left respectively.

Margin Values

length ¹

relative: Relative to another length property

• em: the 'font-size' of the relevant font
• ex: the 'x-height' of the relevant font
• px: pixels, relative to the viewing device

absolute:

• in: inches -- 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
• pc: picas -- 1 pica is equal to 12 points.

The three boxes below display the different effects of a margin set with em, px and in.

.emlength { margin: 2em;
        border: solid;}

.inlength { margin: .15in;
        border: solid;}

.pxlength{ margin: 2px;
        border: solid;}

An image of the effect.

percentage

Percentage values are relative to their parent element and are computed by multiplying the percentage times the parent's initial value. In the two examples below the rules are saying "indent the block by 2% of the width of the P element", and "indent the block by 5% of the width of the P element", respectively.

        .twopct {
                margin  : 10%;
                border  : solid;
                }

        .fivepct        {
                margin  : 5%;
                border  : solid;
                }

An image of the effect.

auto

The widths are dependent upon the values of other properties.

Additional Resources:

• W3C: 8.3 Margin properties
• Web Design Group: Margin

Putting Style Sheets in Perspective: border-property
Putting Style Sheets in Perspective: Marginally Speaking
Putting Style Sheets in Perspective: text-indent