Bits & Bytes

The CSS Box Model

The CSS box model has four regions: the content region, the padding region, the border region, and the margin region. These regions can cause some confusion when coding CSS, so we have created some examples below for illustration. We start with the basic content region, which we can resize by setting the width and height parameter values. Then we add a border to the the content. Next, we put padding around the content area to separate it from the border. Finally, we add a margin to separate this content box from elements on the page via whitespace. Additionally, we add scroll bars to show what happens when the content does not fit within the content region.

Each web page is made elements that can exist within CSS boxes. Oftentimes the content that goes into these boxes, like images, has a set width and height. With text, we typically set the width and the height is determined by the amount of text in the box. However, we can set the width and height directly, and this will resize an image or set the bounds of the text area and so that we need to adjust scroll bars to see all of the text. When we set the width and height of the content region, we have to keep in mind the size of the overall box on the page.

width = 200 pixels
height = 100 pixels

To the left, we have a simple red box with black text that describes the width and height of the box, which we set with the style rules width: 200px; height: 100px;. The content region has no background color by default, but we set the color shown here by setting the background to red, using background-color: #FF0000. This box is simply the content region, which often holds text, like this one does, or an image. When the width and height properties are set like this, the values only apply to the content region and not the surrounding regions, as we will show. So, we have to keep that in mind when considering layout. None of the other regions are present in this example.

width = 200 pixels
height = 100 pixels

Some text that extends outside the box horizontally.

More text
More text
More text
More text

Sometimes the content extends beyond the bounds of the content region. For example, we might have more text than what will fit in the content box. When this is the case, the text will wrap at the specified width and extend outside of the box below it. Generally, we will want to keep the text inside of the content area and add scroll bars to allow the content to be viewed within the content region only. This can be accomplished by styling via an overflow rule, which can be set to always have scroll bars like this: overflow: scroll;. To the left, we have our original content region with some added content and scroll bars to allow all of the text to be read. Notice that the scroll bars are placed inside of the content region and take up some of the space there; they do not expand the width and height of the box.

width = 200 pixels
height = 100 pixels
border = 10 pixels

To give our content a more pleasing appearance, we can add a border to it. Borders can have many styles and serve as a frame for the content much as a picture frame on a picture. Border styles include: solid, dotted, dashed, and several others; we can also change the border’s color as well. To the left, we have added a dark gray border that is 10 pixels wide, using the style rule border: 10px solid #444444;. A typical border is usually much thinner than this, but we have made this one wide for greater visibility. Notice that in this case, the border does not use up content area like the scroll bars do, but it does add to the width and height of the overall box. So, the overall box width and height have the width and height of the content region plus the border: overall width = 220 pixels, overall height 120 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels

Notice that the text inside the box above touches the border. This looks cluttered and makes the content more difficult to read. To make the content more pleasant looking and provide some much needed whitespace, we can use the padding region. To the left, we have set the padding to a width of 20 pixels on each side, using the style rule padding: 20px;. This helps to empasize the content by separating it from the border in much the same way that a matte does in a picture frame. Notice that the padding region is not visible. That is, it is is the same color as the background of the content area. In fact, we can consider the background region to be made up of the content region and the padding region. Also, notice that the padding region adds to the overall width and height of the box, so now we have: overall width = 260 pixels, overall height 160 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels
margin = 30 pixels

Finally, we remark that the text outside of the box tends bump up against the border and give the layout a sloppy appearence. To fix this, we can add margins to the box to separate the border from the outside content. To the left, we have the same box as last time, except that we have added a 30 pixel margin on each side of the box, using the style rule margin: 30px. The margin region is not visible. It looks just like the surrounding area with the same backgound color. So, the margin merely serves as a spacing for the content to separate it from outside content. Again, this adds whitespace to our content box, which helps it to stand out and look less cluttered. Again, the margin adds to the size of the entire box for the element so that now we have: overall width = 320 pixels, overall height 220 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels
margin = 30 pixels

Unfortunately in the previous box, we were not able to clearly see the content region, the padding region, and the margin region. That is because they share background colors with adjacent regions. To help clarify where these regions are, we have colored the content region and the margin region. To the left, we have the margin region that is 30 pixels wide on the outside in black. Inside this region, we have the border region that is 10 pixels wide in dark gray. Just inside of the border, we have the padding region which 20 pixels wide and is red, as it was before. Finally, in the middle, we have the content region, which has been changed to light gray. Notice that we have added the scroll bars again to illustrate that they appear in the content region. This box is the same size as the previous one. It is merely colored differently for illustration.

Notice that each of our content boxes were the same size 200 pixels by 100 pixels. However, the size of the entire box has expanded as we added the padding region, the border region, and the margin region. CSS offers finer control than what we have used, and we can set the width of the padding, border, and margin regions for each side individually. Given that, we can give the formulas for the width and height of the entire box as

overall width = width + (right and left padding)

+ (right and left border)

+ (right and left margin)

overall height = height + (top and bottom padding)

+ (top and bottom border)

+ (top and bottom margin)

Tags: , , , , , , ,

Michael Hall

By: Michael Hall

One Response to “The CSS Box Model”

  1. […] element has several distinct regions that can be specified, as I discussed in a another post on the CSS box model. Of these regions, three different colors may be selected for the border, background, and text, as […]

Leave a Reply

*

 

© 2007–2024 XoaX.net LLC. All rights reserved.