Many novice Web developers use CSS positioning and layout directives without a sound understanding of how they really work. A brief introduction to the box model explains what it is and how you can use it to make better decisions about positioning your HTML elements on a Web page.
Cascading Style Sheets (CSS) have gradually become the de facto standard for HTML layout and positioning. They're easy to use, don't require any special software, and work uniformly on most major browsers. However, in their very simplicity lies a danger: many novice Web developers use CSS positioning and layout directives without a sound understanding of how they really work. When these directives end up producing unexpected results, such novice developers tend to solve the problem through trial and error, rather than an analysis of fundamentals; this usually creates layout that works well on some browsers but "breaks" on others.
To mitigate this problem, it is worth spending some time to understand some of the core CSS drivers and concepts. And one of the most important concepts a developer can understand is the so-called CSS "box model", which underpins most of CSS layout and positioning. This article provides a brief introduction to this box model, explaining what it is and how you can use it to make better decisions about positioning your HTML elements on a Web page.
The CSS box model represents every element on a Web page in a bounded box which contains four components:
- the element content itself at the core;
- an envelope of padding around the element;
- a border around the padding, which demarcates the visible area of the element;
- a margin around the border.
These four components of the box model can be visually represented as shown in Figure A.
|Components of the CSS box model|
From the above, it should be clear that when considering how much space an element takes up on a page, the width and height of the content itself are not sufficient. Rather, one must also consider the width and height of the element's padding, borders and margins. This fact, though obvious on reflection, is one that most novice developers are unaware of and is, in fact, the reason behind many instances of overlapping page elements or elements that do not resize correctly with the rest of the page.
To see how this works in practice, let's work through an illustrative example. Consider the following HTML (Listing A):
html public "-//W3C//DTD HTML 4.0//EN">
This is text outside the box. At veroeos et accusam et justo duo dolores et ea rebum. Stet clitakasdgubergren, no sea takimatasanctusestLoremipsum dolor sit amet.
This is text inside the box. Loremipsumdolor sitamet, consetetursadipscingelitr, seddiamnonumyeirmodtemporinviduntutlabore et dolore magna aliquyamerat, seddiamvoluptua.
This is a fairly simple page - two paragraphs of text, one inside a <div> and one outside it. The text inside the <div> has been assigned a red, dashed border to make the box model easier to understand. The total box width at this point is 350px. Here's what it looks like (Figure B).
Next, let's add some padding (Listing B):
Figure C shows you the output.
As you can see, the additional padding on all four sides of the text has increased the space between the border and the element content by 10px. The total width of the box is now (350+10+10) = 370px.
Next, how about increasing the thickness of the border (Listing C):
Here's the output (Figure D):
The difference is immediately visible. The new width of the box is (370+15+15) = 400px.
The border demarcates the visible area of the element. Other elements flow around the outer border of the element. If you'd like to increase the spacing between this element's border and others on the page, you must turn to the third layer of the box: margins. Consider the next rule (Listing D), which adds a margin of 40px to the top border of the element:
In this case, the line of text above the <div> will be separated from the outside border of the <div> by an extra 40px. Figure E shows you what it looks like.
|Increased top margin|
Of course, because the margin's only been added to the top, the width of the box remains 400px. However, the height increased by the size of the top margin. If you'd prefer a uniform margin, consider the following rule (Listing E), which adds a margin of 40px on all sides of the box:
And here's the revised output (Figure F):
|Margins on all sides|
The total box width in this case would be (400+40+40) = (350+10+10+15+15+40+40) = 480px.
As the examples above illustrate, adding margins, borders and padding to a content fragment can cause it to take up significantly more place on a page than the actual amount of content would warrant. Therefore, when positioning elements on a page, a sound understanding of the box model, and its impact on neighboring elements, goes a long way to helping you lay your page out more accurately.
The above is, of course, only the tip of the iceberg. For more information on the box model, take a look at the official W3C specification. It's also worth noting that most modern browsers render CSS boxes in the manner described above; however, older versions of Netscape and Internet Explorer operate in a non-standard manner and require you to make adjustments to your code in order to have your pages render correctly.
Hopefully you found the above interesting, and now have a better idea of what goes on behind the CSS directives you use so frequently. Drop me a line if you'd like to read more and until then...happy coding!