Layout fundamentals
Collapse the table of content
Expand the table of content

Layout fundamentals

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.

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.

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.

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.

Community Additions

ADD
Show:
© 2016 Microsoft