为什么 inline-block 元素中有间隙

Question

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

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

Answer 1

您应该尝试删除应用于某些元素的默认样式。

* {
 margin: 0;
 padding: 0;
}

Answer 2

很可能是因为 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>

为什么 inline-block 元素中有间隙

Why there are gaps in inline-block element

html

css

properties

display