CSS Lesson #1
"All Boxed In"
The box model is the foundation of Cascading Style Sheets. Without understanding it, you won't have any idea how elements interact with each other or where to start looking if something is displaying incorrectly. I'll go into more detail about these properties in a later lesson.

Unfortunately Internet Explorer doesn't render this correctly which results in buggy code and webdesigner frustration. The goal to solve these problems (and to develop good coding practices) is to view your webpages in a browser that renders CSS correctly such as Firefox (my favorite) or Netscape. DO NOT design for Internet Explorer as your design will probably look strange in just about every other browser. Opera has issues as well but not nearly as many.

The CSS Box Model

(The CSS Box Model)


Rules to Remember:
1. The background (color or image or a combination of the two) will always fill all the available space to the outer edge of the border which means that it will be visible through the border if doubled, dashed, or dotted. This is not true in Internet Explorer as the background color or image will stop at the inner edge of the border.

2. This is always true: margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = the width of the parent element's content area.

3. Vertical margins are collapsed. Let's say that you have two elements stacked vertically in a document. <p>paragraph 1</p> has a bottom margin of 10px while <p>paragraph 2</p> has a top margin of 5px. The largest margin of the two is used so that the margin between the borders of the two paragraphs is just 10px not 15px. In the case of negative margins, the absolute maximum of the negative margin will be subtracted from the positive margin. (Example #2: paragraph 1 has a bottom margin of 20px while paragraph 2 has a top margin of -5px. The margin between the two elements will be 15px (20 - 5).) This rule doesn't apply for elements that are floated or positioned or for horizontal margins.


margin: The space outside of the element and outside the border.

border: The line around the element whether visible or invisible.

padding: The space within the element but only if it's a non-image.

width: The width of the element.

height: The height of the element.


Something else that's important to visual design using CSS is called the inline model, which explains how text is laid out on a webpage. Usually you won't need to know the specifics but sometimes it comes in handy.

content area: The "font-size" property defines this.

inline box: This height of the inline box will always equal the value of the "line-height" property.

line box: This box surrounds a row of inline boxes and its height is determined by the highest positioned inline box and the lowest. These boxes are stacked and make up the content of a block-level element.

This page was last updated on: