内联元素的框模型 [英] Box Model for Inline Elements

问题描述

W3C的CSS2.1规范， 8.6盒子模型对于双向上下文中的内联元素，指出：

对于每个行框，UA必须采用为每个$生成的内联框b $ b元素，并以视觉顺序
（不是逻辑顺序）呈现边距，边框和填充。

当元素的'direction'属性为'ltr '，其中出现该元素的第一行框的最左侧的
生成框具有
的左边距，左侧边框和左侧的填充，以及最右侧的
生成的框出现该元素的最后一个行框具有
右填充，右边框和右边界。

问题

• 它显示最左侧的生成框，表示内联级元素创建了多个内联-水平框。那是因为在每次换行时都会创建一个新的匿名内联级别框吗？


• 内联框的填充/边框为什么表现如下？深入了解为什么要以CSS规范为基础显示其工作方式。

  .test {margin：0 10px;填充：20px;边框：5像素蓝色；}  

 < span class =  test> test2test2test2test2test2test2test2test2解决方案

对于第二个问题，您可以参考规范的这一部分：

height属性不适用。内容区域
的高度应基于字体，但本规范未指定
的方式。 UA可以例如使用字体的em-box或最大升序和
降序。 （后者将确保在em-box上方或下方具有
部分的字形仍位于内容区域内，但是
会导致不同字体的大小不同的框；前者将确保作者使用
可以控制相对于
'line-height'的背景样式，但会导致字形在其内容
区域之外绘画。）

垂直填充，内嵌的非替换框
的边框和边距从内容区域的顶部和底部开始，与$ line $的高度无关。 但是，当
计算行框的高度时，仅使用行高。

  .test {margin：0 10px;填充：20px;边框：5像素蓝色；} div {边框：1像素红色； margin：50px 0;}  

 < div>< span class = test> test2test2test2test2test2test2test2test2 test< / span> / div < div>< span class = test style = line-height：50px;> test2test2test2test2test2test2test2test2test2 test2test2< / span>< / div>< div>< span class = test style = line-height：50px;> test2test2test2test2test2test2test2test2 test2test2 test2test2test2test2test2test2test2test2test2test2test2< / span >> $ b
W3C's CSS2.1 specification, chapter 8.6 The box model for inline elements in bidirectional context, states:

  
For each line box, UAs must take the inline boxes generated for each
  element and render the margins, borders and padding in visual order
  (not logical order).
  
  
When the element's 'direction' property is 'ltr', the left-most
  generated box of the first line box in which the element appears has
  the left margin, left border and left padding, and the right-most
  generated box of the last line box in which the element appears has
  the right padding, right border and right margin.
Questions


It says "left-most generated box", which indicates that the inline-level element creates more than one inline-level box. Is that because at each line break it creates a new anonymous inline-level box?
Why does the padding/border of inline boxes behave as below? Insight into why it shows up the way it does, with basis in the CSS specification, would be greatly appreciated.




.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}

<span class="test">test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2</span>



解决方案
For the second question you may refer to this part of the specification:

  
The 'height' property does not apply. The height of the content area
  should be based on the font, but this specification does not specify
  how. A UA may, e.g., use the em-box or the maximum ascender and
  descender of the font. (The latter would ensure that glyphs with parts
  above or below the em-box still fall within the content area, but
  leads to differently sized boxes for different fonts; the former would
  ensure authors can control background styling relative to the
  'line-height', but leads to glyphs painting outside their content
  area.)
  
  
The vertical padding, border and margin of an inline, non-replaced box
  start at the top and bottom of the content area, and has nothing to do
  with the 'line-height'. But only the 'line-height' is used when
  calculating the height of the line box.


.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}

div {
 border:1px solid red;
 margin:50px 0;
}

<div>
<span class="test">test2test2test2test2test2test2test2 test</span>
</div>

<div>
<span class="test">test2test2test2test2test2test2test2 test st2test2test2test2 test st2test2test2test2 test st2test2test2test2 test</span>
</div>



<div>
<span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2</span>
</div>

<div>
<span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2 test2test2test2test2test2test2test2 test2test2</span>
</div>





                        
这篇关于内联元素的框模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！