Formatting Contexts

From CSS Discuss

Jump to: navigation, search

Formatting contexts are the areas in which content is layed out. Each context holds the elements within it, and defines the rules for how those tags lay out within that context.

The most visible formatting context is the entire page. An HTML page defines how block elements flow, one after the other. Each statically positioned block element on the page is above the next statically positioned block element on the page.

Contents

Block formatting contexts

Block formatting contexts are the ones we think about most of the time in web design. A block formatting context defines how block-level elements lay out within them. If you've got two paragraphs, one after the other, the first paragraph in a block formatting context will appear above the second paragraph in the block formatting context. If no width-changing styles are applied, then both paragraphs will stretch to cover the entire content width of the block formatting context.

Again, look at a regular, unstyled page of content. In such a page, the <html> tag defines the overall block formatting context for the page. Most browsers give the <html> tag some padding, so that the content doesn't smack against the edges of the window. Within the <html> tag, all paragraphs, tables, lists and so on fit within the content area of that tag, one after the other.

Creating multiple block formatting contexts

There are typically many block formatting contexts on a page. This is because block formatting contexts are created by all of these items:

  • Table cells
  • Table captions
  • Inline blocks
  • Absolutely positioned elements
  • Floated elements
  • Elements with overflow other than visible

If you look at an HTML page with these elements in it, it will become obvious that indeed each of these items create their own contexts. Paragraphs inside of floats, absolute elements, and table cells all stay within these containers.

The static (and relative) content inside of a block formatting context stays inside of that block formatting context, and doesn't really care what happens outside of it. When the context's height is auto, floats stay inside of the context they're created in, too. [1]

In a way, each block formatting context is something like a miniature document. This is most obvious when a new context is created by applying overflow: auto. The element then behaves like an iframe, where the element's content is analogous to the source document for the iframe.

Using multiple block formatting contexts for design

Multiple block formatting contexts are quite useful for corralling floats. As mentioned above, if a context's height is auto, it will stretch to fit any floats inside of it. This fact can be used to create "self-clearing" elements, such as:

<style type="text/css">
    #container {
        overflow: auto;
        padding: 1em;
        border: 1px;
    }

    #floater {
        float: right;
    }
</style>

<div id="container">
    <div id="floater">This is text on the right side.</div>
</div>

In this example, the outer element's border and padding will surround the entire float.

Block formatting contexts can also be useful for creating block elements that won't be overlapped by a float:

<style type="text/css">
    #floater {
        float: left;
        width: 40%;
        border: 1px solid blue;
        margin-right: 2em;
    }

    #clearer {
        display: table-cell;
        padding: 1em;
        border: 1px solid red;
    }
</style>

<div id="floater">
    <p>This is floating content.</p>
</div>
<div id="clearer">
    <p>This content is in a box that starts 2em's to the right of the floater.</p>
</div>

In this example, the red-bordered box floats, while the blue-bordered box doesn't. The blue border, however, won't overlap the margin of the float. Instead, there will be 2ems of space between the two borders.

Inline formatting contexts

Each block element that contains inline content will also contain an inline formatting context. In a block formatting context, each block-level element sits one atop the next down the page. In an inline formatting context that runs from left to right, each piece of inline content lays left-to-right along a line, until it needs to wrap to the next line because it hits the edge of its container.

Basically, inline formatting context is a fancy name for text layout within a paragraph, table cell, or whatever.

The rules for positioning content is different at the inline level than from the block level.

When people talk about "The Box Model", they typically are describing how dimensions, padding, borders and margins interact in a block formatting context. Many of these concepts break at the inline level. Although horizontal padding, border and margin impact the design and spacing of inline elements, vertical padding, border and margin have no impact on the space between lines of text. (They still do for replaced elements -- items where the tag represents an external resource, such as a form button or an image -- but not for text or elements that change text formatting.)

Vertical space in an inline formatting context

Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up.

Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it.

Horizontal space in an inline formatting context

When adding horizontal borders, padding or margins to inline elements, they will only be applied to the ends of the inline element. If that element breaks because it wraps onto a new line, the borders, paddings and margins should not apply to the edges where it breaks, but only to the edges where the element stops or starts.

Inline content does not impact the width of the block-level element containing it. If an inline piece of content is bigger than its container (such as a large image in a small floating element), it will overflow. (This is not true for Internet Explorer -- it will stretch the container.)

Personal tools