Understanding an Element s Box

Understanding an Element's Box

The term elements refers to the various parts of an HTML document that are set off by HTML container tags.

The following is an HTML element:

<p>Alice</p>

This is another HTML element:

<div><p><b>Alice<img src="alice11.gif"> </b></p></div>

The first example is an element made of a single tag. The second example is a collection of nested tags, and each of those nested tags is in turn an individual element. Remember that nested tags are referred to as the children of the tags within which they are nested; those tags in turn are referred to as the parents (see "Inheriting Properties from a Parent" in Chapter 2).

Parts of the Box

All HTML elements have four sides: top, bottom, left, and right (Figure 6.1). These four sides make up the element's box, to which CSS properties can be applied. Each side of the box has the following properties:

Figure 6.1. An element's box has a margin, a border, and padding on four sides around its central content. You can define the element's width and height or leave it to the browser's discretion.

• Content and Background are at the center of the box. All other CSS properties (font, text, color, background, and lists) apply to this area. (Note: Background properties also apply to the padded area of an element's box.) The content includes all text, lists, forms, and images you care to use.

• Child Elements are elements contained within the parent element that are set off by their own HTML tags. Child elements also typically have their own box that can be controlled independent of the parent.

• Width and height, which are the dimensions of the content area. If you leave width and height undefined, these distances are determined by the browser (see "Setting the Width and Height of an Element" later in this chapter).

• Margin , which is the space between the border of the element and other elements in the window (see "Setting an Element's Margins" later in this chapter). If left unset, the margin is defined by the browser.

• Border , which is a rule (line) that surrounds the element. The border is invisible unless its color, width, and stylesolid, dotted, dashed, and so onare set (see "Setting an Element's Border" later in this chapter). If left unset, the border size is generally 0.

• Padding , which is the space between the border and the content of the element (see "Setting an Element's Padding" later in this chapter). Background colors and images will also fill this space. If left unset, the size of the padding is generally 0.

Limitations of the "Box" Model

So far it's fairly simple: All elements are rectangular "boxes" with a margin, border, padding, and content that has a width and height. But remember, this is Web designit can never be that simple, right?

Right. The problems begin when you realize that not all browsers define boxes the same way.

According to the W3C definition of a box created using CSS, the width and height define the width and height of only the content area (the area where images and other objects are displayed). The apparent width and height, or the total width and height that the element takes up in the design, include the content area plus the padding and border sizes. So, the apparent width would be calculated in the following way:

width(content) + left padding + right padding + left border + right border = width(apparent)

Unfortunately, Microsoft Internet Explorer through version 5.5 defined width and height values as the apparent width and height (including padding and borders). This effectively subtracts the padding and border sizes to determine the content width and height:

width(apparent) - left padding - right padding - left border - right border = width(content)

So, given the following CSS:

#object1 {     border: 5px solid #000;     padding: 10px;     width: 100px; }

browsers using the W3C standard (Firefox, Safari, Opera) will set the content area to 100 pixels wide, but will have an apparent width of 130 pixels (Figure 6.2):

100 + 5 + 5 + 10 + 10 = 130

Figure 6.2. The box rendered by W3C-compliant browsers, including Safari, Firefox, and Opera, as well as Internet Explorer 6+ (if you're using Strict DTD), will be 130 pixels wide.

Whereas Internet Explorer 5.5 and earlier will set a content area 70 pixels wide and an apparent width of 100 pixels (Figure 6.3):

70 + 5 + 5 +10 + 10 = 100

Figure 6.3. The same box rendered by Internet Explorer 5.5 and earlier and Internet Explorer 6+ using Transitional DTD will be 100 pixels wide.

This is a problem, and it gets worse.

Recent versions of Internet Explorer (6 and later) fix this problem by following the W3C standards. However, remember our discussion about Quirks mode in Chapter 1 (see "Setting Your DTD")? If you are using the transitional DTD for your page, which is still very common, Internet Explorer 6 and later (including 7) revert to the "quirky" version of the box model.

So what's a good Web designer to do? You have several options:

• Solution 1. Do not use a border and or padding, or, if you do, do not expect pixel precision layout. Generally, this solution isn't practical, but for simple pages it might do the trick.

• Solution 2. Code for the Strict DTD only and hope that no one visits your site using Internet Explorer 5.5 and earlier. This approach has some obvious drawbacks, since there is still a sizable portion of the browsing public using these legacy browsers.

• Solution 3. Use one of the "hacks" (most likely the conditional comments) to code separate "equalizing" widths and/or heights for Internet Explorer. These techniques are discussed in the "Using Conditional Comments to Fix CSS in Internet Explorer" section of Chapter 2. This solution may require you to code twice for a lot of elements, but at least you ensure that your page will look right everywhere and every time.

Tips

• Element boxes can also wrap around other elements, embedding an element within another (see "Floating Elements in the Window" in Chapter 7).

• The terms "apparent width" and "apparent height" are not official CSS terms, but I needed to be able to differentiate between width and height for content, and the total width and height that the element takes up in the design.