空inline和inline-block元素之间的差异行框
我的理解是，在内联格式化上下文中，行框垂直堆叠。容器盒的高度是从最顶线盒的上边缘到最底线盒的底边的距离。
但是如果inline元素和inline-block元素为空会发生什么呢？我猜在这两种情况下都不会创建行框，并且容器高度将为0。
然而，空的inline-block元素令人困惑。因为它的容器有一个正的高度，等于线的高度。它真的创建了一个线框！
为什么空的inline-block元素会创建行框，而空的inline元素不会？
<!DOCTYPE html>
<html lang="en">
<body>
<div style="background:red">
<span style="display:inline-block"></span>
</div>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2018-04-13 00:59:41
从本质上讲，CSS 2.2 Section 9.4.2 Inline formatting contexts中的这条语句
行框是根据需要创建的，用于在内联格式设置上下文中保存内联级内容。对于不包含文本、不保留空白、不包含具有非零边距、填充或边框的内联元素、不包含其他流动内容(如图像、内联块或内联表格)且不以保留换行符结尾的行框，为了确定其中任何元素的位置，必须将其视为零高度行框，并且必须出于其他目的将其视为不存在。
因此，内联块显式地阻止包含它们的行被视为零高度或不存在。
Stack Overflow用户
发布于 2018-04-13 00:37:39
当你使用display: inline时，这意味着内容将与之前和之后的内容在同一行(继续)。
当您使用display:inline-block时，它在新的一行开始显示，后面跟着新的内容。
以下是示例https://www.w3schools.com/cssref/pr_class_display.asp的链接
Stack Overflow用户
发布于 2018-04-13 00:40:26
带有display: inline-block的元素会创建一个新的块，元素会自然地展开以填充容器。内联元素没有width或height属性，所以它们没有任何高度或宽度，除非其中有一些内容。
https://stackoverflow.com/questions/49801671
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号