尽管有'box-sizing: border-box”，为什么内联块元素仍会溢出其容器？-css教程-PHP中文网

尽管有'box-sizing: border-box”，为什么内联块元素仍会溢出其容器？

Linda Hamilton

发布： 2024-12-11 20:11:21

原创

404 人浏览过

Why Do Inline-Block Elements Overflow Their Container Despite `box-sizing: border-box`?

内联块框过度拟合容器

在CSS中，内联块元素本质上是用额外的间距来渲染的。这可能会导致意外溢出或包装在容器中。

考虑以下示例：

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block; 
  box-sizing:border-box;
  width:25%;
  border:2px solid blue;
  height:100%;
}

登录后复制

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

登录后复制

尽管设置了 box-sizing: border-box，但内联块元素容器安装不整齐。这是因为内联元素之间的默认间距（包括换行符）会导致额外的水平空间。

要解决此问题，可以消除 HTML 源中元素之间的空白：

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

登录后复制

这确保了内联块元素之间没有额外的间距，使它们能够正确地适合其容器。

以上是尽管有'box-sizing: border-box”，为什么内联块元素仍会溢出其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！