为什么内联块导致这个div有高度？
我似乎无法弄清楚为什么使用display:inline-block会导致此<div>元素以某种方式在隐藏其包含元素时获得高度.这不会发生display:block.
HTML:
<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;"><input type="hidden" /></div>
<div>No gap above if using block</div>
为什么会display:inline-block造成这里描述的差距？
nkm*_*mol 37
创建a时发生的一件事display:inline-block是line-height计算会发生变化:
在内联格式化上下文中,框从一个包含块的顶部开始一个接一个地水平排列.这些框之间会考虑水平边距,边框和填充.盒子可以以不同的方式垂直对齐:它们的底部或顶部可以对齐,或者它们内的文本的基线 可以对齐.
来源:http://www.w3.org/TR/CSS2/visuren.html#block-formatting
计算行框中每个内联级别框的高度.对于替换元素,内联块元素和内联表元素,这是其边距框的高度; 对于内联盒子,这是他们的"线高".
来源:http://www.w3.org/TR/CSS2/visudet.html#line-height
CSS假定每种字体都有字体度量,指定高于基线的特征高度和低于它的深度.在本节中,我们使用A表示高度(对于给定大小的给定字体)和D表示深度.我们还定义AD = A + D,即从顶部到底部的距离.
来源:http://www.w3.org/TR/CSS2/visudet.html#inline-box-height
因此,行高将在其字体类型上定义.但是当它inline-block是空的时,它将具有它的基础line-height.然而它仍然试图line-height用字体生成他的.
要快速修复此问题,您可以使用一个包装器,它定义了没有字体的独占性,因此没有line-height哪个不会导致任何高度:
.wrapper
{
font-size: 0;
}
您可以在以下位置重置此属性inline-block:
.wrapper div
{
font-size: medium;
}
其中默认值为font-size中等.
这样你仍然可以在inline-block没有差距的情况下使用内容.
更新
此更新是因为Kevin Wheelers的评论
...我很困惑,它仍然没有说明空内联块元素的高度....
我想要注意的是,我没有找到任何关于此的官方文档,尽管通过测试我发现了常见的模式.
精简版:
只需将其视为inline-block预期内容,并根据已知内容预留最小行间距line-height.
更多见解:
你可以看到inline-block高度的line-height噱头是基于a ,我们在第一篇文章中已经确定了.
现在它line-height来自哪里？
它继承自第一个阻止line-height:<body>元素的东西.
您可以测试这是我的变化font-size,font-family或line-height将的<body>元素.
所以它保留了line-box它的内容.奇怪的是它完全可见,正如你可以看到的内联格式的W3规范:
不包含文本,没有保留的空格,没有非零边距的内嵌元素,填充或边框,没有其他插入内容(如图像,内联块或内联表)的行框,并且不以为了确定其中任何元素的位置,必须将保留的换行视为零高度线框,并且必须将其视为不存在用于任何其他目的.
它为内部的每个其他元素执行此操作inline-block,但它似乎始终保留最小行间距.
显然display:inline-block,默认情况下height根据父母设置视觉效果line-height.该解决方案使用以下属性创建父包装器:
#container {
line-height:0;
}
演示http://jsfiddle.net/FE3Gy/33/.在这里,您可以查看具有不同font-size值的示例.
加入W3是:
内联块的内部被格式化为块框,元素本身被格式化为原子内联级框.
关于内联框在这里
线框的宽度由包含块和浮点数确定.线框的高度由线高计算部分中给出的规则确定.
所以你可以line-height在这里查看更多信息:
http://www.w3.org/TR/CSS2/visudet.html#line-height
小智 5
好的,如评论中已经非常简短地提到的那样:
内联块
此值使元素生成内联级块容器.内联块的内部被格式化为块框,元素本身被格式化为原子内联级框.
排队
此值使元素生成一个或多个内联框.
这个主题最重要的部分是元素本身的格式不仅仅是内容.每个内联块元素都将被视为原子内联框,从而占用空间.
资料来源:http://www.w3.org/TR/CSS2/visuren.html#inline-boxes
- 那么有没有好的解决办法呢？这会让转换变得很混乱，尤其是当我们有高度未知的 div 时。 (2认同)