Block are box that can be seen as stacked element (such as paragraphs, section, …)
Block boxes:
The formatting rules in order to render a block box are:
In a block formatting context (ie a block box), boxes are:
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).
A new block formatting contexts is created when the following element are encountered:
<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;
}
A block box is generated:
Each block element:
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.