CSS box model问题：box-sizing + 100％height + border + inline-block

Question

看看这个小提琴： http://jsfiddle.net/WTcgt/

为什么BOX1按BOX2的边界向下推？这是一个错误吗？

Answer 1

Internet Explorer，Opera和Chrome支持box-sizing属性。

Firefox支持另一种选择，-moz-box-sizing属性。

Safari支持另一种选择，-webkit-box-sizing属性。

这是工作示例http://jsfiddle.net/WTcgt/2/

这是内嵌块：

的行为

  

内联块内嵌（即与相邻的同一行）   内容），但它表现为块。

使用vertical-align:top来避免此问题。如果我们不使用vertical-align属性，则元素基于相邻元素在同一行中对齐。有关详细信息，请参阅http://www.impressivewebs.com/inline-block/和http://www.brunildo.org/test/inline-block.html

Answer 2

您的框是内联块框，而不仅仅是常规的内嵌框，因此它们的边框在这方面起着“填充”的作用。

要清楚，因为BOX2上有一个顶部边框，它会将BOX2的内容区域向下推（尽管{{1}可能隐含的内容，不会流入内容区域}！）。这导致同一行上所有其他内联块框的内容区域也跟随，如spec（强调我的）中所述：

  

内联，未替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与'line-height'无关。但在计算线框的高度时只使用'line-height'。