o que significa "caixa de linha" em css
nos docs do css há muitas menções de caixas de linha (por exemplo aqui ). O que significa exactamente?
2 answers
A especificação CSS 2.1 explica o conceito na secção 9.4.2 Inline formatting contexts http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
A área rectangular que contém as caixas que formam uma linha é chamada de caixa de linha .
...
Quando várias caixas ao nível da linha não cabem horizontalmente numa única caixa de linha, são distribuídas entre duas ou mais caixas de linha empilhadas verticalmente. Assim, um parágrafo é uma pilha vertical de linha caixa.
...
Quando uma caixa em linha excede a largura de uma caixa em linha, é dividida em várias caixas e estas caixas são distribuídas por várias caixas em linha. Se uma caixa de texto não puder ser dividida (por exemplo, se a caixa de texto contiver um único carácter, ou se as regras de quebra de palavras específicas da língua não permitirem uma quebra dentro da caixa de texto, ou se a caixa de texto for afectada por um valor de espaço em branco do nowrap ou pre), então a caixa de texto transborda a caixa de linha.
HTML:
<p>
<span>With HTML/CSS, *everything* is laid out using a box.</span>
<br>
<br>
<span>This is a <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 <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;
}