1

I can't find an answer that highlights the difference between the two. Anybody know?

Joel Castro
  • 485
  • 6
  • 20
  • Does this answer your question? [What's the difference between a block-level box and a principal block-level box?](https://stackoverflow.com/questions/15114396/whats-the-difference-between-a-block-level-box-and-a-principal-block-level-box) – Zhubei Federer Jan 31 '23 at 00:51
  • @ZhubeiFederer No, I'm asking about content box not block-level box. – Joel Castro Jan 31 '23 at 02:00

1 Answers1

0

Start with the box model. A principal box is a box. It comprises a margin area, border area, padding area and content area.

The edges of the content area form a rectangle perimeter called, somewhat confusingly IMO, the "content box".

The first, outermost box that an element generates, if it generates any boxes at all, is called the principal box.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Where can I confirm this information? – Joel Castro Jan 31 '23 at 04:28
  • @JoelCastro - Added some supporting links to the specifications – Alohci Jan 31 '23 at 08:32
  • You say principal box includes margin, border, padding, content. If that is true, then how come marker-box is inside the border when you set an element's display value to list-item, and the default value of list-style position (https://www.w3.org/TR/CSS22/generate.html#x45) is outside, which means the generated marker box should be outside the principal box. If the marker box is outside the principal box, but still inside the borders, doesn't that mean that the principal box is somewhere inside the borders as well? – Joel Castro Jan 31 '23 at 15:18
  • @JoelCastro - Well, the marker box is a whole interesting question in itself. But in short, the marker box is a _child_ box of the principal box, even when it's _positioned_ outside it. – Alohci Jan 31 '23 at 17:45