What does 'generated box' in css mean? -

as question title, 'generated box' in css mean? article link: http://www.sitepoint.com/web-foundations/css-box-model/

a "generated box" box associated element in visual formatting structure. word "generate" refers act of creating box , drawing on screen according css properties of element. introduction section 9 of css2.1 spec summarizes nicely:

in visual formatting model, each element in document tree generates 0 or more boxes according box model. layout of these boxes governed by:

• box dimensions , type.
• positioning scheme (normal flow, float, , absolute positioning).
• relationships between elements in document tree.
• external information (e.g., viewport size, intrinsic dimensions of images, etc.).

most elements tend generate 1 box, can generate multiple boxes or none @ depending on situation. example, following generates single block box 100 pixels 100 pixels:

<div style="width: 100px; height: 100px; background-color: red"></div>

the following inline element generates 2 inline boxes, 1 each line:

<span style="line-height: 2; background-color: yellow">text<br>text</span>

and following list item generates 2 boxes: marker box contains bullet, called principal box, box in content resides , styles targeting list item applied (detailed explanation given here):

<ul>    <li style="list-style-position: outside; background-color: cyan"></li>  </ul>

you can see background not extend marker box, happens because list-style-position outside. setting inside causes marker box positioned text, within principal box. remains own self-contained entity, however.

setting display: none causes element generate no box @ all. element remains in dom tree, , inheritance works normally, visually not exist.