Layout fundamentals in strict mode

  • Article

Measurement and location properties are available through the DHTML Document Object Model (DOM) and as cascading style sheet attributes. 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 content box. An element rectangle is handled differently in strict mode than in quirks mode.

In quirks mode, the height and width of an element rectangle include the sum of the height, the width, the padding, and the border. In strict mode, the content box is defined by the height and width properties only, without the addition of padding or border.

Block versus inline elements

All visible HTML elements are displayed either 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 is a block level element with a specified height and width.

  • It is a block level element with overflow parameters that are not set as visible.

A positioned element has specific measurements and can be set to a location using the cascading style sheet layout attributes: top, right, left, and bottom. The location of a non-positioned element is relative to its 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

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

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