html - 为什么 inline-block 元素中存在间隙

Question

为什么 Inline-block 元素在 CSS 中有空白。如何防止内联块元素之间出现空格。在图像中容器的子元素有空格

.container {
   width:360px; height:360px; border:5px solid #999;
}
.childs {
  width:130px; height:130px; display: inline-block; border:1px solid #eee;
}

标签： htmlcsspropertiesdisplay

Answer 1

很可能是因为 HTML 中的元素之间有空格（或其他空格，例如换行符）。空格在内联内容中很重要。

<div>
  <span>Otherwise</span>
  <span>these</span>
  <span>words</span>
  <span>would</span>
  <span>run</span>
  <span>together</span>
</div>

您可以从源中删除空格，但使用不同的布局机制（例如 flexbox）可能会更好。

div {
    display: flex;
    flex-wrap: wrap;
}

<div>
  <span>Then</span>
  <span>these</span>
  <span>words</span>
  <span>do</span>
  <span>run</span>
  <span>together</span>
</div>