Lecture 19: Introducing the CSS Box Model

Overview:

The CSS Box Model
border-related Properties
padding-related Properties
margin-related Properties
width Property
height Property
The Windows IE 5.x Box Model
Some Box Model Applications

The CSS Box Model

The CSS Box Model is a key aspect of CSS and is at the heart of how CSS formats and presents information.
First, every element contains content (such as images and/or text) that is located within a defined width and/or height.
Surrounding that content is a layer of padding (invisible to the user; background colors go through this padding), then a border layer, and finally a margin that is outside the border and that is also invisible to the user.
The border is the dividing line between the inside of an element and the outside of the element. Inside the element is the content and padding; outside is the margin.
Note that the width of any padding is in addition to the width of the content; any vertical padding is in addition to the height of the content.
Simon Jessey has a nice illustration showing the layers of the CSS Box Model.
Using the box model (specifying width, height, padding, border, and/or margin) always works best on block-level elements or elements instructed to display as block-level (we will cover that in a future lecture).
For inline elements, or elements displayed as inline, widths and heights are ignored, margins will be rejected or not be consistent in rendering, borders can render oddly, and padding can also run into some issues (depending on the browser used).
Many block-level elements have default margins on the top and bottom greater than zero; some (such as blockquotes and list items) even have them on the left and right sides.
Padding and border, on the other hand, generally default to 0 (zero) for the majority of elements.
To disable a default padding or margin it can be set to 0, which does not need a unit specified (browsers know what nothing is; whether it is zero pixels vs. zero em's makes no difference).

border-related Properties

When specifying border widths the keywords (thin, medium, thick) are not ideal because they are not precise. Specifying a border-width in pixels is generally recommended for precise control.
When em's are used in the context of border widths and for sizing other parts of the box model (in other words, not for text sizing) the resulting space is calculated differently.

A width of 1em is equal to an em square, which is a square shape of equal height and width, with the height of the square equal to the height of the font.

Property	Usage and Effect	Values Accepted	Recommendations
border-top-color	Determines the color for the top border of an element.	A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent'	The border-color shorthand property is usually more efficient.
border-right-color	Determines the color for the right border of an element.	A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent'	The border-color shorthand property is usually more efficient.
border-bottom-color	Determines the color for the bottom border of an element.	A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent'	The border-color shorthand property is usually more efficient.
border-left-color	Determines the color for the left border of an element.	A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent'	The border-color shorthand property is usually more efficient.
border-color	Shorthand for border-top-color, border-right-color, border-bottom-color, and border-left-color properties.	A pre-defined color name, hexadecimal value (e.g., #fff), an rgb value: rgb(255,0,0) or rgb(0%,50%,25%), or 'transparent' If you specify one value (e.g., border-color: green;) the border-color is the same on all sides of the element If you specify two values (e.g., border-color: green black;) the first value counts for top and bottom border-colors, while the second value counts for the left and right border-colors If you specify three values (e.g., border-color: #fff #000 #eee;) the first value counts for the top border-color, the second value counts for the left and right border-colors, and the third value counts for the bottom border-color If you specify four values (e.g., border-color: #fff #000 #eee #ccc;) the values progress clockwise around the element. The first value is used for the top border-color, the second value is used for the right border-color, the third value is used for the bottom border-color, and the fourth value is used for the left border-color	The default border-color is black. If possible, use the 'border' shorthand (or a variant such as 'border-top') rather than this property; it is more efficient.
border-top-style	Determines the style for the top border of an element.	dotted \| dashed \| solid \| double \| groove \| inset \| outset \| none	The border-style shorthand property is usually more efficient.
border-right-style	Determines the style for the right border of an element.	dotted \| dashed \| solid \| double \| groove \| inset \| outset \| none	The border-style shorthand property is usually more efficient.
border-bottom-style	Determines the style for the bottom border of an element.	dotted \| dashed \| solid \| double \| groove \| inset \| outset \| none	The border-style shorthand property is usually more efficient.
border-left-style	Determines the style for the left border of an element.	dotted \| dashed \| solid \| double \| groove \| inset \| outset \| none	The border-style shorthand property is usually more efficient.
border-style	Shorthand for border-top-style, border-right-style, border-bottom-style, and border-left-style properties.	dotted \| dashed \| solid \| double \| groove \| inset \| outset \| none If you specify one value (e.g., border-style: double;) the border-style is the same on all sides of the element If you specify two values (e.g., border-style: double solid;) the first value counts for top and bottom border-styles, while the second value counts for the left and right border-styles If you specify three values (e.g., border-style: solid none dashed;) the first value counts for the top border-style, the second value counts for the left and right border-styles, and the third value counts for the bottom border-style If you specify four values (e.g., border-style: solid none double solid;) the values progress clockwise around the element. The first value is used for the top border-style, the second value is used for the right border-style, the third value is used for the bottom border-style, and the fourth value is used for the left border-style	Dotted and dashed render as solid in Windows IE 5.01 and Netscape 4.x. IE 6 renders 1px dotted borders as dashed; larger sizes display properly as dotted. IE 7 fixed this so that 1px dotted renders properly. Some border styles need to have a width of a few pixels before they can render properly. For example, a 1px double border will render as a solid line because at least 3 pixels of width are necessary for proper rendering. Browsers differ in how they color the tops and bottoms of borders. Extensive cross-browser, cross-platform testing is advised. If possible, use the 'border' shorthand (or a variant such as 'border-top') rather than this property; it is more efficient.
border-top-width	Determines the width for the top border of an element.	Number and unit (e.g., px, em, %), as well as keywords (thin \| medium \| thick)	The border-width shorthand property is usually more efficient.
border-right-width	Determines the width for the right border of an element.	Number and unit (e.g., px, em, %), as well as keywords (thin \| medium \| thick)	The border-width shorthand property is usually more efficient.
border-bottom-width	Determines the width for the bottom border of an element.	Number and unit (e.g., px, em, %), as well as keywords (thin \| medium \| thick)	The border-width shorthand property is usually more efficient.
border-left-width	Determines the width for the left border of an element.	Number and unit (e.g., px, em, %), as well as keywords (thin \| medium \| thick)	The border-width shorthand property is usually more efficient.
border-width	Shorthand for border-top-width, border-right-width, border-bottom-width, and border-left-width properties.	Number and unit (e.g., px, em, %), as well as keywords (thin \| medium \| thick) If you specify one value (e.g., border-width: 3px;) the border-width is the same on all sides of the element If you specify two values (e.g., border-width: 3px 6px;) the first value counts for top and bottom border-widths, while the second value counts for the left and right border-widths If you specify three values (e.g., border-width: 3px 6px 5px;) the first value counts for the top border-width, the second value counts for the left and right border-widths, and the third value counts for the bottom border-width If you specify four values (e.g., border-width: 3px 6px 2px 4px;) the values progress clockwise around the element. The first value is used for the top border-width, the second value is used for the right border-width, the third value is used for the bottom border-width, and the fourth value is used for the left border-width	The border-width shorthand property is usually more efficient than specifying individual border widths for various sides.
border-top	Combines the other border-related properties into one sequence that applies to the top border of an element.	Sequence of Values: border-width border-style border-color Note that each segment can only be given a single value.	Use the 'border' shorthand if all sides need to be consistent.
border-right	Combines the other border-related properties into one sequence that applies to the right border of an element.	Sequence of Values: border-width border-style border-color Note that each segment can only be given a single value.	Use the 'border' shorthand if all sides need to be consistent.
border-bottom	Combines the other border-related properties into one sequence that applies to the bottom border of an element.	Sequence of Values: border-width border-style border-color Note that each segment can only be given a single value.	Use the 'border' shorthand if all sides need to be consistent. This can be used for links as an alternative to text-decoration; just be sure to specify 'text-decoration: none' to avoid a double effect.
border-left	Combines the other border-related properties into one sequence that applies to the left border of an element.	Sequence of Values: border-width border-style border-color Note that each segment can only be given a single value.	Use the 'border' shorthand if all sides need to be consistent.
border	Combines the other border-related properties into one sequence that applies to all border sides of an element.	Sequence of Values: border-width border-style border-color Note that each segment can only be given a single value.	Highly recommended (it is the shorthand of shorthands when it comes to border appearance, combining the 'border-top', 'border-right', 'border-bottom', and 'border-left' shorthand properties).

Sample code:

<!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" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Borders</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, h2 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px;}
    h2 {font-size: 16px;}
    .outset {border: 3px outset #ccc;}
    .solid {border: 3px solid #000;}
    .dotted {border-left: 2px dotted #000; border-top: 2px dotted #000;}
    .top {border-top: 3px dashed blue;}
    .groove {border: 3px groove green;}
    .double {border-bottom: 6px double red;}
    .inset {border: 4px inset #000;}
    --></style>
</head>
<body>

<h1 class="outset">This Level 1 heading has a 3px #ccc outset border</h1>

<p class="solid">This paragraph has a 3px solid #000 border on all
sides</p>

<h2 class="dotted">This Level 2 heading has 2px #000 dotted borders on
its top and left sides.</h2>

<p class="top">This paragraph has a 3px dashed blue border on just its
top side</p>

<h2 class="groove">This Level 2 heading has 3px green groove borders</h2>

<p class="double">This paragraph has a red 6px double bottom border</p>

<p class="inset">This paragraph has a 4px inset #000 border</p>

</body>
</html>

See how this example renders

padding-related Properties

Unlike margins, which sometimes collapse into each other, padding values from different elements always add together (referred to as concatenation)

Property	Usage and Effect	Values Accepted	Recommendations
padding-top	Determines the padding space at the top of an element.	Number and unit (e.g., px, em, %)	Use the 'padding' shorthand if multiple sides need to be consistent.
padding-right	Determines the padding space on the right side of an element.	Number and unit (e.g., px, em, %)	Use the 'padding' shorthand if multiple sides need to be consistent.
padding-bottom	Determines the padding space at the bottom of an element.	Number and unit (e.g., px, em, %)	Use the 'padding' shorthand if multiple sides need to be consistent.
padding-left	Determines the padding space on the left side of an element.	Number and unit (e.g., px, em, %)	Use the 'padding' shorthand if multiple sides need to be consistent.
padding	Shorthand for padding-top, padding-right, padding-bottom, and padding-left properties.	Number and unit (e.g., px, em, %) If you specify one value (e.g., padding: 3px;) the padding is the same on all sides of the element If you specify two values (e.g., padding: 3px 6px;) the first value counts for top and bottom padding, while the second value counts for the left and right padding If you specify three values (e.g., padding: 3px 6px 5px;) the first value counts for the top padding, the second value counts for the left and right padding, and the third value counts for the bottom padding If you specify four values (e.g., padding: 3px 6px 2px 4px;) the values progress clockwise around the element. The first value is used for the top padding, the second value is used for the right padding, the third value is used for the bottom padding, and the fourth value is used for the left padding	Highly recommended; the padding shorthand property is usually more efficient than specifying individual paddings for various sides.

Sample code:

<!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" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Padding</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, h2 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px;}
    h2 {font-size: 16px;}
    .outset {border: 3px outset #ccc; padding: 5px;}
    .solid {border: 3px solid #000; padding: 0 30px;}
    .dotted {border-left: 2px dotted #000; border-top: 2px dotted #000;
             padding: 5px 0 0 5px;}
    .top {border-top: 3px dashed blue; padding-top: 15px;}
    .groove {border: 3px groove green; padding: 20px 5px;}
    .double {border-bottom: 6px double red;}
    .inset {border: 4px inset #000;}
    --></style>
</head>
<body>

<h1 class="outset">This Level 1 heading has a 3px #ccc outset border
and padding of 5px on all sides</h1>

<p class="solid">This paragraph has a 3px solid #000 border on all
sides and padding of 30px on the left and right sides</p>

<h2 class="dotted">This Level 2 heading has 2px #000 dotted borders on
its top and left sides, as well as 5px padding on those sides.</h2>

<p class="top">This paragraph has a 3px dashed blue border on just its
top side and a top padding of 15px</p>

<h2 class="groove">This Level 2 heading has 3px green groove borders,
with padding of 20px on the top and bottom and 5px on the left and
right sides</h2>

<p class="double">This paragraph has a red 6px double bottom border</p>

<p class="inset">This paragraph has a 4px inset #000 border</p>

</body>
</html>

See how this example renders

margin-related Properties

It is possible to supply a negative margin value to an element (e.g., margin: -5px;) in order to shift the element's location on the page, however I recommend doing so with significant caution. Carefully test cross-browser and cross-platform if you go that route.
As the table below indicates, top and bottom margins of elements following each other collapse rather than combine, so that only the larger margin value is used.
Some other margin considerations occur when nesting elements that all have margins; the top and bottom margins will collapse if there is no border or padding to separate the elements.
An empty element (no content) with top and bottom margins will also find that those collapse into each other, if no padding or border is specified. If this is immediately adjacent (following or preceding) an element with vertical margins on the appropriate side, it will then collapse into that element's margin.
Horizontal (left / right) margins will combine together.

Property	Usage and Effect	Values Accepted	Recommendations
margin-top	Determines the margin space above the element.	Number and unit (e.g., px, em, %)	Keep in mind that many block-level elements have default top margins greater than 0. Overlapping vertical margins (top and bottom margins) from separate elements collapse into each other. Use the 'margin' shorthand if multiple sides need to be consistent.
margin-right	Determines the margin space to the right of an element.	Number and unit (e.g., px, em, %)	Overlapping horizontal margins (right and left margins) from separate elements will concatenate (add together). Use the 'margin' shorthand if multiple sides need to be consistent.
margin-bottom	Determines the margin space below the element.	Number and unit (e.g., px, em, %)	Keep in mind that many block-level elements have default bottom margins greater than 0. Overlapping vertical margins (top and bottom margins) from separate elements collapse into each other. Use the 'margin' shorthand if multiple sides need to be consistent.
margin-left	Determines the margin space to the left of an element.	Number and unit (e.g., px, em, %)	Overlapping horizontal margins (right and left margins) from separate elements will concatenate (add together). Use the 'margin' shorthand if multiple sides need to be consistent.
margin	Shorthand for margin-top, margin-right, margin-bottom, and margin-left properties.	Number and unit (e.g., px, em, %) If you specify one value (e.g., margin: 3px;) the margin is the same on all sides of the element If you specify two values (e.g., margin: 3px 6px;) the first value counts for top and bottom margin, while the second value counts for the left and right margin If you specify three values (e.g., margin: 3px 6px 5px;) the first value counts for the top margin, the second value counts for the left and right margin, and the third value counts for the bottom margin If you specify four values (e.g., margin: 3px 6px 2px 4px;) the values progress clockwise around the element. The first value is used for the top margin, the second value is used for the right margin, the third value is used for the bottom margin, and the fourth value is used for the left margin	Highly recommended; the margin shorthand property is usually more efficient than specifying individual margins for various sides.

Sample code:

<!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" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Margin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body, h1, h2 {font: 12px verdana,geneva,lucida,arial,sans-serif;}
    h1 {font-size: 18px;}
    h2 {font-size: 16px;}
    .outset {border: 3px outset #ccc; padding: 5px; margin: 0;}
    .solid {border: 3px solid #000;
            padding: 0 30px;
            margin: 10px 30px;}
    .dotted {border-left: 2px dotted #000; border-top: 2px dotted #000;
             padding: 5px 0 0 5px;}
    .top {border-top: 3px dashed blue; padding-top: 15px;}
    .groove {border: 3px groove green;
             padding: 20px 5px;
             margin: 40px;}
    .double {border-bottom: 6px double red; margin: 0;}
    .inset {border: 4px inset #000; margin: 0;}
    blockquote {border: 4px double #000;}
    --></style>
</head>
<body>

<h1 class="outset">This Level 1 heading has a 3px #ccc outset border
and padding of 5px on all sides; its default margin has been turned
off so only the 'body' margin is giving it space above (the
paragraph below sets up the margin space there)</h1>

<p class="solid">This paragraph has a 3px solid #000 border on all
sides and padding of 30px on the left and right sides; margin was
also at 30px on the left and right sides and 10px on the top
and bottom sides</p>

<h2 class="dotted">This Level 2 heading has 2px #000 dotted borders on
its top and left sides, as well as 5px padding on those sides.</h2>

<p class="top">This paragraph has a 3px dashed blue border on just its
top side and a top padding of 15px</p>

<h2 class="groove">This Level 2 heading has 3px green groove borders,
with padding of 20px on the top and bottom and 5px on the left and
right sides; margins were set at 40px on all sides</h2>

<p class="double">This paragraph has a red 6px double bottom border
and has its default margin turned off</p>

<p class="inset">This paragraph has a 4px inset #000 border and also
has its default margin turned off</p>

<blockquote>This blockquote was included so that its default margins
could be seen; it has a 4px double #000 border.</blockquote>

</body>
</html>

See how this example renders

width Property

Property	Usage and Effect	Values Accepted	Recommendations
width	Determines the horizontal space for content inside the element. The total horizontal space occupied by the element is the sum of the width, left/right padding, and left/right border.	Number and unit (e.g., px, em, %) or 'auto' (the default)	This is very useful, since by default block-level elements fill up their parent element and that is not always what you want.

Sample code:

<!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" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Width</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 14px verdana,geneva,lucida,arial,sans-serif;}
    #box1 {width: 600px;
           padding: 10px;
           border: 5px double #000;}
    #box2 {width: 500px;
           padding: 20px;
           border: 5px groove #000;
           margin-top: 10px;}
    --></style>
</head>
<body>

<div id="box1">This division has a width for content of 600 pixels,
with padding on all sides of 10px and a border on all sides of 5px
double #000.  The total horizontal space occupied by the division
is 630 pixels (5 + 10 + 600 + 10 + 5)</div>

<div id="box2">This division has a width for content of 500 pixels,
with padding on all sides of 20px and a border on all sides of 5px
groove #000.  The total horizontal space occupied by the division
is 550 pixels (5 + 20 + 500 + 20 + 5).  The top margin of 10px
separates this from the division above.</div>

</body>
</html>

See how this example renders

height Property

Property	Usage and Effect	Values Accepted	Recommendations
height	Determines the vertical space for content inside the element. The total vertical space occupied by the element is the sum of the height, top/bottom padding, and top/bottom border.	Number and unit (e.g., px, em, %) or 'auto' (the default)	I seldom specify heights, because browsers do not enforce that as a maximum height. Specifying a height sets that as the minimum height, but sufficient amounts of content (or a user who has scaled text quite large) can then exceed that height. As a result, I usually prefer to let content set the height of an element.

Sample code:

<!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" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Height</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 14px verdana,geneva,lucida,arial,sans-serif;}
    #box1 {width: 600px;
           padding: 10px;
           border: 5px double #000;
           height: 200px;}
    #box2 {width: 500px;
           padding: 20px;
           border: 5px groove #000;
           margin-top: 10px;
           height: 10em;}
    --></style>
</head>
<body>

<div id="box1">This division has a width for content of 600 pixels,
with padding on all sides of 10px and a border on all sides of 5px
double #000.  The total horizontal space occupied by the division
is 630 pixels (5 + 10 + 600 + 10 + 5).  The height for content is set
at 200px, which ultimately totals 230 pixels (5 + 10 + 200 + 10 + 5).
</div>

<div id="box2">This division has a width for content of 500 pixels,
with padding on all sides of 20px and a border on all sides of 5px
groove #000.  The total horizontal space occupied by the division
is 550 pixels (5 + 20 + 500 + 20 + 5).  The top margin of 10px
separates this from the division above. The height is set at 10em,
which ultimately gets 50 pixels added to it from padding and border.
</div>

</body>
</html>

See how this example renders

The Windows IE 5.x Box Model

The Windows version of Internet Explorer 5 has a significant issue with its interpretation of the box model; IE 6 and 7 use this flawed interpretation in Quirks mode (yet another reason to always stay in Standards rendering mode).
Rather than treating width and height as being just for the content and adding padding and border to those, this flawed box model subtracts the padding and border from the width and height.
The end result is that Windows IE 5.x (and IE 6/7 in Quirks mode) will always render elements smaller if the author has specified width or height and a relevant padding or border side. The margin does not factor into this, as it exists outside the element.
CSS hacks are commonly used in order to pass Windows IE 5.x one set of width/height values while the other browsers see a different width/height. Those approaches are covered in INP 170: Web Coding II, since that class focuses on layouts and that is where the flawed box model can make a significant difference in appearance.
Viewing the above examples for width and height in IE 5.01 and IE 5.5 and comparing that to the rendering in IE 6, IE 7, Firefox, Mozilla, and Opera (or, if you are on a Mac, it could be Mac IE 5.x or Safari) will clearly show the difference.

Some Box Model Applications

Disabling the default spacing assigned to 'body': Be sure to set both margin and padding to 0 (some browsers have a default padding for body greater than zero).
Inserting vertical space between list items: Apply to 'li'; margins work better here than padding. Useful because list items otherwise have no extra spacing between them and the extra space improves readability.
Centering a block-level container on the page: Make sure the element has a width and then specify margin-right and margin-left values of 'auto', which splits the available horizontal space outside the element between the two sides (thus centering the element).

Windows IE 5.x does not understand this and needs 'text-align: center' specified, which it then improperly uses to center the element. When using both approaches to accommodate all browsers note that the text-align will inherit down into the elements nested inside, so some overrides (setting content back to 'text-align: left') will be necessary.
Turning off the blue borders around linked images: Setting the border for the image to either 'none' or '0' will disable the blue border. Old browsers (e.g., Netscape 4.x) do not understand this.
Disabling margin space above/below headings and paragraphs in Gecko-based browsers and Opera: Browsers such as IE will generally disable the margin-top for a heading or paragraph if it is inside a table cell or division (that is just part of their internal stylesheet). Gecko-based browsers and Opera keep the default margin intact, which results in rendering differences cross-browser because in those browsers the content is pushed further down.

Sample code:

<!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" xml:lang="en" lang="en">
<head>
    <title>Embedded CSS: Box Model Applications</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"><!--
    body {font: 12px verdana,geneva,lucida,arial,sans-serif;
          margin: 0;
          padding: 0;
          text-align: center; /* for Windows IE 5.x centering */}
    h1 {font-size: 18px; font-weight: normal;}
    li {margin-bottom: 1em;}
    img {border: none;}
    .noTopMargin {margin-top: 0;}
    .ctr {margin: 0 auto 10px;
          width: 500px;
          text-align: left;
          border: 1px solid #000;}
     --></style>
</head>
<body>

<div class="ctr">
<h1 class="noTopMargin">This heading has had its default top margin
disabled in all browsers.</h1>

<ul>
    <li>List items with space between them</li>
    <li>List items with space between them</li>
    <li>List items with space between them</li>
</ul>
</div>

<div class="ctr">
<h1>This heading, however, still shows its default top margin.
Compare rendering in IE to Gecko-based browsers and Opera.</h1>

<p>The linked image below should not have a blue border:</p>

<a href="http://www.sydneyoperahouse.com/"><img src="sydney2.jpg"
alt="A view of the Sydney Opera House from a distance" width="113"
height="150" /></a>
</div>

</body>
</html>

See how this example renders