CSS box model

A web page is nothing but a group of boxes .

Block boxes - These are rectangular boxes that exist as one over the other according to the order of priority .Block-level boxes are as wide as their CSS box permits them . So, they are usually as wide asthe browser window . e.g. <p> <ul> <ol> etc. are contained in block boxes .e.g. <div> elements , list elememts : <ul>, <ol>, and <dl> .


Inline boxes - They flow one after the other horizontally . They are only as wide as their content needs to be and donot stretch beyond that .Most of text is wrapped within these boxes .e.g. images, links , text .


CSS box properties

width - This determines width of the content area . Suppose you want to set width of the header .This property doesn't applies to inline boxes .


                 #header { width: 250px; }

padding - Padding is the whitespace between content and the edges . e.g.



               #header { width: 250px;
                         padding: 10px;
                       }
       
This applies padding to all four sides and our CSS box is now 270 px wide .


To apply different extent of padding to different directions :


             padding-top: 5px;
             padding-right: 10px;
             padding-bottom: 5px;
             padding-left: 10px;
In case we apply padding to a block box the surrounding text moves further away to accomodate it . In case of inline box the horizontally adjacent content recedes away but the vertically adjacent content may be overlapped .


border - It's the area consisting of the edges of the box .It sets a border width, style, and color for all four
sides of a box.


             #header { width: 250px;
                       padding: 10px;
                       border: 1px solid black;
                      }
e.g.

             border-width-top: 1px;
             border-style-top: solid;
             border-color-top: black;


margin - Whitespace around the box . It pushes any content around the box further away .

e.g.

                 h1, p, ul, ol, { margin: 0 1em ; }


0(0 is not followed by any units )- First value by default applies to the top and bottom of the margin .

1em - This value applies to left and right margins .

So,

         margin: 0 1em ;


expands to :

        margin-top: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        margin-left: 0;

em - It is the length of element’s current font’s lowercase letter m . This is a relative length unit as the size of em depends on the size of font used .

e.g,

        <div id="footer">
           <p>Copyright 2010 Movies Freak , All rights reserved.</p>
        </div>


      #footer {
      width: 250px;
      padding: 10px;
      border: 1px solid black;
      margin: 0 auto;
     }

Use of auto value in this case puts the footer in the center of the browser window .This happens as left and right margins adjust to occupy equal horizontal space .