CSS - Block Box

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Block Layout

1 - About

Block box can be seen as:

  • paragraphs.
  • stacked element

Block boxes:


3 - Formatting Rules

The formatting rules in order to render a block box are:

  • A block element occupies the entire space of its parent element, thereby creating a “block”.
  • Browsers typically display the block element with a newline both before and after the element.
  • By default, block elements begin on new lines, but inline elements can start anywhere in a line.
  • Block-level elements may contain inline elements.

In a block formatting context (ie a block box), boxes are:

  • laid out one after the other, vertically (ie with a new line between them)
  • beginning at the top of a containing block.

The vertical distance between two sibling boxes is determined by the 'margin' properties.

Each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

See the full block formatting specification

4 - Formatting Context

A new block formatting contexts is created when the following element are encountered:

  • Floats,
  • absolutely positioned elements,
  • block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes,
  • and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport)

5 - Example

5.1 - Basic

<p>First P (Default display: block)</p>
<p>Second P (Default display: block) <BR> And some <BR> comment</p>
p {
   border:1px solid black;
   padding: 20px;

6 - Generation

A block box is generated:

7 - Tree

Each block element:

  • generates a principal block-level box
  • that may contains descendant boxes and generated content

Some block elements may generate additional boxes in addition to the principal box: eg CSS - list-item (list formatting) elements. These additional boxes are placed with respect to the principal box.


8 - Documentation / Reference

web/css/block/block_box.txt · Last modified: 2019/02/09 11:40 by gerardnico