Layout fundamentals in quirks mode

  • Article

Measurement and location properties are available through the DHTML Document Object Model (DOM) and as cascading style sheet properties. You can use DHTML DOM properties to programmatically set cascading style sheet properties. Properties exposed through the DHTML DOM return values based on how an element renders in the document. Cascading style sheet properties return values based on the preset values of other cascading style sheet properties.

The element box

Every visible element on a web page occupies an absolute amount of space in the document. The amount of space occupied by an element is defined by the element rectangle or box. An element rectangle includes all the layout and display properties plus any content.

In the preceding graphic, the margin, border, and padding properties are shown surrounding the content of a generic element. "Element Width" represents the width of the content of the element, and "Box Width" represents the width of the content plus the additional space occupied by the layout properties. The height of an element and its layout properties can be represented similarly.

Block versus inline elements

All visible HTML elements are either displayed in blocks or inline. A block element, such as a DIV element, typically starts a new line and is sized according to the width of the parent container. An inline element, such as a SPAN element, typically does not start a new line and is sized according to the height and width of its own content.

Size, layout, and location of elements

An element has layout when one of the following conditions is true:

  • It has a width, a height, or both specified.

  • It is an inline-block element (display: inline-block).

  • It has absolute positioning (position: absolute).

  • It is a float element (float: left, float: right).

  • It is a table element.

  • It is transformed (style="zoom: 1").

Nearly all inline and block elements have layout. The exception is an inline element that is neither positioned nor has its height or width specified.

A positioned element has specific measurements and can be set to a location using the cascading style sheet layout properties: top, right, left, bottom. The location of non-positioned elements is relative to their nearest ancestor that has layout. Location is useful when moving one or more elements to relative or absolute coordinates within the document. It can also be useful for creating specific document styles.

See also

Concepts

Cascading style sheet reference
Properties by name
Measurement and location properties in strict mode

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.