内联元素的框模型

问题描述

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

问题

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


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

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

 < span class =  test> test2test2test2test2test2test2test2test2解决方案

对于第二个问题，您可以参考：

  .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:
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:
.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>
                        
这篇关于内联元素的框模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！