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 .
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 .
