CODEWITHSUNDEEP
htmlcss
mqklin
mqklin

Reputation: 2048

what does mean "line box" in css

In css docs there is many mentions of line boxes (for example here). What does it exactly mean?

Upvotes: 28

Views: 12252

Answers (2)

Leah
Leah

Reputation: 458

In this fiddle you can also see that the kind of box that contains the line itself is the line-box. It has a border, too. http://jsfiddle.net/LyVf5/

HTML:

<p>
    <span>With HTML/CSS, *everything* is laid out using a box.</span> 
    <br>
    <br>
    <span>This is a &lt;span>.  It has a border around it, so you can see how your browser positions it.  Notice that when the line wraps, the "box" that the line is in wraps also.  Maybe this is what you're asking about?  More text...  This is a &lt;span>.  It has a border around it.  Notice that when the line wraps, the "box" that the line is in wraps also.    More text...</span>
</p>

CSS:

p{ 
    margin: 2em; 
}
span{ 
    border: 1px dotted gray; 
    line-height: 150%; 
    padding: 3px; 
}

Upvotes: 8

sbedulin
sbedulin

Reputation: 4362

CSS 2.1 specification explains the concept in 9.4.2 Inline formatting contexts section http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

The rectangular area that contains the boxes that form a line is called a line box.

...

When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes.

...

When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

Upvotes: 22

Related Questions