How Big Is a Box?

How Big Is a Box? This is a question that has apparently baffled browser developers and even the World Wide Web Consortium (W3C). This issue is at the heart of some of the most frustrating aspects of CSS for beginner and expert alike. Let's go step by step and review the box model in a little more depth. We discuss setting the width of a box here, but you can apply the same (il)logic to the height also. You can set the width of an element box (hereafter simply called a box) using the width property p {width:400px} Then you can turn the background color on so that you can see the box without affecting its width in any way p {width:400px; background-color:#EEE} Figure 4.9 shows a 400-pixel-wide element with background color on. Figure 4.9. By setting the width property, the element does not default to the width of the containing element. In this case, the containing element is the body element, which is always the width of the browser window. Without any padding, the content is this width also and it touches the sides of the box. That makes perfect sense, but this logic goes out of the window when you start adding padding and borders. Let's add a padding of 20 pixels to each side of the content, like this p {width:400px; background-color:#EEE; padding:0 20px;} You might expect that if you pad a 400-pixel-wide box by 40 pixels, the content gets squeezed down to 360 pixels, but you would be wrong. Instead, in the wonderful, wacky world of CSS, the box gets bigger by 40 pixels (Figure 4.10). Figure 4.10. Adding padding causes the box to get wider. If you then add a 6-pixel border to the right and left sides of the box [View full width] p {width:400px; margin: 0; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px; background-color:#CCC;} the box grows wider by 12 pixels (Figure 4.11). Now the original 400-pixel-wide box is a total of 452 pixels wide (6 + 20 + 400 + 20 + 6 = 452). Figure 4.11. Adding borders causes the box to grow even wider. Let's now add right and left margins to create space around the sides of the element (Figure 4.12) [View full width] p {width:400px; margin: 0 30px; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px; background-color:#CCC;} Figure 4.12. Margins create space around an element. Adding margins, 30 pixels to each side in this case increases the overall space occupied by the element since the margins are outside of the box. However, although you might reasonably expect the border of the box and the padding within not to increase the box's width, they do. These sizing issues can have important implications as you fine-tune your work. When you have a tight layout where every pixel is accounted for and you decide to add to the padding or border thickness of element, you then have to subtract the corresponding amount from the box width value to keep the overall dimensions the same. You have to keep your wits about you as you make these kinds of adjustments, but that's the way the CSS box model works. To make matters more confusing, Internet Explorer 5 and 5.5 for Windows handles the box model completely differently, by behaving the way you might expect and by maintaining the box width when padding is added by squeezing down the content. Internet Explorer 6 behaves like Internet Explorer 5 in Quirks mode (or with no DOCTYPE). However, Internet Explorer 6 works according to the "correct" version described above if the DOCTYPE is set to Transitional or Strict. The takeaway from this box model discussion is that, with all modern, standardscompliant browsers, when you set the width of an element, you are really setting the width of the content within it, and any padding, borders, and margins you set increase the overall space the element occupies over and above the specified width value. Now let's look at the other key component you need to understand when it comes to creating CCS-based layoutsthe position property.