Element Width

From CSS Discuss

Jump to: navigation, search

One of the most common misconceptions about Cascading Style Sheets , and also one of the most controversial points about it in certain circles, is its definition of the property width. The CSS definition of width is that it defines the width of the element's content area. Any padding or borders are added to that width, as are margins. For example:

div#example {width: 300px; padding: 1em; border: 3px double gray;}

The width of the visible portions of the box will be 300px + 2em + 6px, or 306px + 2em. Since the user can always change the font size (see Force Font Size ), there is no way to predict exactly how many pixels wide the visible portion of the element will be in this example.

Most authors, upon coming to this understanding, immediately decry this aspect of CSS as being totally unreasonable and backwards. After all, shouldn't width refer to the visible portion of the box? Not necessarily. Let's assume for a moment that width defined the visible part of an element. That would mean that the following would be true:

width == content-width + padding-left + padding-right + border-left-width + border-right-width

So we'd have a situation where one property defined the sum of four or five other properties. This is a situation found nowhere else in CSS; the closest one can get is font, which allows a value for line-height. The shorthand properties like margin don't have the same effect, as they set a uniform value for other properties, or set individual values for individual properties. Neither is really what the hypothetical width behavior would do.

For that matter, CSS was devised largely by computer scientists and similarly logical folks. Having one property per element piece is more logical and conceptually clean than having a property that encompasses several other properties. It's also worth pointing out that if width did define the visible element width, we'd have situations that were the reverse of what we have now, where it wasn't possible to predict in advance the width of the content. In some design approaches, that would be a problem too.

To give an example of that last statement, let's consider an image of 200px wide, with a border of 10px on both sides. If width: 200px is used in the image, the image will be 200px and the borders will be added to it. If it were different and borders would be inside the width, the image would be 180px, and the only way to specify that the 200px image should be shown as a 200px image would be to specify an actual width of 220px.

Future developments

The CSS3 box model, currently in draft form, proposes properties to address this situation. It lets authors choose which sizing model they want to use, even on an element-by-element basis. In other words, authors will be able to define what width means for a given element, or even for a whole document. Thus the debate may fade away in the future. (This author, for one, can't wait. -- Eric Meyer )

why not just define a "total-width" property?
Because then you'd have the potential for conflict. What if the sum of width, margins, borders, and padding yielded you one value, but a "total-width" property specified a different value? How would they be reconciled? (Not saying it isn't possible -- just that it introduces unnecessary complexity.)


A note about width and browsers: Generally (without setting other properties), in IE, the box will expand to accommodate the width of the content. In Gecko/Opera, the box will be the width and height which you set it to, so the content can/will flow outside the box's border. - DougBTX

Note also that most versions of Internet Explorer use an incorrect model of the width property. See the Box Model Hack .

Category Property

Should we move this page to "Width" since that's the name of the property? Page names don't have to be Wiki Words here.

Personal tools