7

To cite the spec:

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box: 'list-item' elements. These additional boxes are placed with respect to the principal box.

Are they essentially the same thing?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
TheFooProgrammer
  • 2,439
  • 5
  • 28
  • 43
  • You should modify your question and add this :: do you mean block boxes that have a corresponding element/node in the DOM tree? – Milche Patern Feb 27 '13 at 14:39

2 Answers2

11

A principal block-level box is the block-level box generated by a given element that's directly affected by style rules that apply to the element.

Most elements generate only one box. For these elements, they are essentially the same thing, since there are no other boxes involved.

However, an element can generate more than one box depending on its display type, such as a list item; when you declare styles for such an element, the styles are typically applied to the principal box and any additional boxes that are generated will be rendered accordingly.

For example, a list item has a marker box in addition to the principal box; if you specify list-style-position: outside, the list marker will be placed outside the boundaries of the principal box but the background and borders of the principal box won't be affected. Note that the marker box is still a descendant of the principal box, so inheritable properties such as color will apply to the marker (this is why color: red turns both the text and its bullet marker red).

Most other block-level elements, including display: block but excluding display: table (see section 17.4), will simply generate a principal block box for their content and nothing else, making them essentially just "block boxes", but only for those elements.

In other words, all principal block-level boxes are block-level boxes, but not all block-level boxes are principal, for example anonymous block boxes. Also, inline elements, including inline blocks, do not generate any principal boxes themselves, nor is there such a thing as a principal inline box.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Thanks for the explanation. I assume, in other words, anonymous boxes can not be principal boxes. By the way, by saying *The principal block box is the block box which is directly affected by a style rule*, do you mean block boxes that have a corresponding element/node in the DOM tree? – TheFooProgrammer Feb 27 '13 at 14:37
0

principal block is essentially what your 'markup' represents, for mechanical purposes, some 'principal' elements needs other elements to be rendered correctly, those are some-kind of 'artifacts' needed by a browser to display extra ( a scroll bar from a textarea for example )

Milche Patern
  • 19,632
  • 6
  • 35
  • 52