CSS - Block Box Layout
About
Block are box that can be seen as stacked element (such as paragraphs, section, …)
Block boxes:
- create a block formatting context (layout)
- and are involved in any positioning layout
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).
Formatting Context
A new block formatting contexts is created when the following element are encountered:
- 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)
Example
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;
}
Generation
A block box is generated:
- by default, if it's a block level element or a block container box.
- or by setting the display property with the following values:
- 'block',
- 'table'.
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 with marker box) elements. These additional boxes are placed with respect to the principal box.