The Box Model

Introduction

In XHTML, every single element is contained within a box. For the most part, these boxes are invisible by default. However, CSS allows us to manipulate the properties of these boxes in a variety of ways. Learning the basics of this manipulation opens the door to a variety of important design techniques.

One of the fundamental concepts in design is proximity. Proximity is a measure of how near together or far apart things are. Since the box model allows us to precisely control the space around each element’s containing box, it also allows us to determine how much space appears between adjacent elements. We can use the box model properties to add padding (which is filled with the same background color or image as the element), a border (which can be any color, width and style we wish), and/or a margin (which will always be transparent), giving us very flexible and precise control over the proximity of elements.

Another important tool in design is the balance between positive and negative space. Positive space is space on the page that is occupied with something such as text or an image. Negative space is unoccupied or empty space on the page. Typically, the page background or the backgrounds of individual elements are visible in the negative spaces on the page. By controlling the box properties of the elements in a page, we can manipulate the negative space that surrounds them.

And understanding how to employ the box model is an essential first step in understanding how to use CSS for positioning and page layout.

Content area

The only part of an element’s box that is generally visible by default is its content area. A box’s content area is the innermost part of the box model. It’s the part of the box that actually contains the element’s content. It’s easiest to visualize the content area of an image, since the dimensions of the image precisely determine the dimensions of the content area:

A photo of a Stargazer Lily

Although it’s generally not advisable to change the dimensions of an image, let’s just experiment a bit with the height and width properties of the image to see what happens. Let’s take the image above, and double its height and width:

Photo of a Stargazer Lily

Notice how the image quality has suffered noticeably as a result of asking the browser to scale it up in size. We can also use these properties to reduce the size of the original image:

Photo of a Stargazer Lily

This doesn’t have as drastic an effect on the image quality, but it does mean that the user has been made to wait to download 150% more data from the server than is necessary, since three-quarters of the pixels have been discarded by the browser.

Note that the height and width properties can be used in CSS to replace the height and width attributes of the <img /> element in the XHTML, giving a browser the information it needs to begin laying out the page before the images themselves have been downloaded from the server.

The height and width properties, while useful for images, are even more powerful when applied to block-level elements. However, when working with block-level elements, it is generally advisable to specify either the height or the width, but not both. This allows the content of the block room to grow or shrink as necessary. Most commonly, it’s the width that we set, allowing the height to be determined by the browser. If we don’t set an explicit width for a block-level element, the browser automatically makes the element as wide as its parent block.

Consider the two small paragraphs that follow:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo, quam luctus sodales egestas, turpis mi mattis tellus, sed bibendum dui neque quis arcu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo, quam luctus sodales egestas, turpis mi mattis tellus, sed bibendum dui neque quis arcu. Pellentesque ornare nunc vitae augue. Vestibulum ullamcorper dolor id magna condimentum faucibus. Pellentesque ut orci.

The width of both has been set to 500 pixels, and neither sets a height. As such, the height of the second paragraph is allowed to grow taller than the first.

Borders

Each element’s box is surrounded by a border. Initially, this border is invisible. However, we can use CSS to make it visible. Consider the following images, each of which has a different style of border:

A photo of a Stargazer Lily

Since the default border style is none, you generally need to set the border-style property in order to get the border to appear. There are several different border styles which you can use, including dashed, dotted, double, groove, hidden, inset, outset, ridge and none.

The border-width property can be used to control the width of the border. It can be set to a variety of length values, but pixels are fairly common. Let’s take the examples from above and add some different widths to their borders:

A photo of a Stargazer Lily

By default, the color of the border will be the same as the current foreground color of the element. However, you can specify any color you wish using the border-color property. Here are the examples from above with different border colors:

A photo of a Stargazer Lily

Of course, borders can also be applied to any element, not just images. Let’s apply a border to one of our paragraphs from above:

Generally, it’s best to limit the use of borders to block-level and replaced elements and avoid borders around inline elements. To see why, consider the following example:

Not particularly attractive, is it?

Padding

The padding controls the space between the content area and the border. For most elements, the padding has a width of 0 by default. However, we can use the padding property to increase the amount of padding that surrounds an element. The effect is most notable when a border is present:

A photo of a Stargazer Lily

However, padding may be added to an element regardless of whether a border is displayed:

Sometimes it is necessary to specify different amounts of padding around different edges of an element. This is most easily seen when working with a bordered image:

A photo of a Stargazer Lily

Margins

Margins control the space outside the border. For most elements, the margin has a width of 0 by default. However, we can use the margin property to increase the width of the margins that surrounds an element. We’ll retain the borders from above to make the distinction easier to see:

A photo of a Stargazer Lily

However, like padding, margins may be added to an element regardless of whether a border is displayed:

Sometimes it is necessary to specify different amounts of padding around different edges of an element. Notice how this effect is not quite as apparent when applied below as it was when we used padding:

A photo of a Stargazer Lily

Differences between margins and padding

When a border is visible, it is easy to see the distinction between margins and padding — margins control space outside the border and padding control the space between the border and the edges of the content area. However, when borders are not displayed, there are still some important differences between margins and padding that one must keep in mind. As such, margins and padding are not interchangeable. You should think about the differences between them when deciding which to use.

Consider what happens when we place padding around two adjacent paragraphs:

There are 50 pixels of padding below the first paragraph and 50 pixels of padding above the second paragraph, for a total of 100 pixels of padding between the adjacent paragraphs. In other words, adjacent padding gets combined additively, so the padding of both adjacent elements is utilized.

By comparison, adjacent margins get collapsed, and only the larger of the two is used. As such, adjacent margins do not combine additively like adjacent padding. Consider the following two paragraphs each with a 50 pixel margin rather than 50 pixels of padding:

Notice that here, only 50 pixels of space appear between the adjacent paragraphs. This is because the margins between them collapsed and only one margin’s worth of space was used. Had the margins been of different widths, the larger of the two would have been used.

Another difference between margins and padding is that the background color and/or image of an element extends into the padding, but the margin is always transparent. Consider the following adjacent paragraphs with a background image and 50 pixels of padding:

Notice that the background image is tiled beginning in the upper lefthand corner of the padding area. The same would be true if it were just a background color.

The extra white space between the two paragraphs is the result of the browser applying its default margins to the them. To remove this space, we would need to explicitly set the margins of these paragraphs to 0:

Now, consider the same paragraphs with no padding and margins 50 pixels wide:

Since these paragraphs have no padding, the background image is tiled only within their content areas, and the transparent margins surrounding them let the background color of the page body show through.

Be sure you understand these differences between padding and margins, and take them into account when deciding which of the two to use in a particular set of circumstances.

, by Michael Gildersleeve
Computer Science
University of New Hampshire
Durham, NH 03824 USA
mike.gildersleeve@unh.edu
http://www.cs.unh.edu/cit/403/