CSS 边距：为什么这种布局会这样？答案

【问题标题】：CSS margins: Why does this layout behave this way?CSS 边距：为什么这种布局会这样？
【发布时间】：2016-04-11 07:04:15
【问题描述】：

我目前尝试自学一些 CSS。

我已经做了这个示例布局：

.group div {
  width: 100px;
  height: 100px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  font-size: 3em;
  font-weight: bold;
  color: white;
  margin: 10px;
}

.wrap {
  width: 500px;
  height: 120px;
  background-color: #efefef;
}

<div class="wrap">
  <div class="group">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

其中的 div-elements 都是 100px 宽度加上 10px margin-left 和 10px margin-right。总和高达 120 像素。 120px 的 4 倍等于 480px。

=> 它应该适合宽度为 500 像素的 wrap-element。

但事实并非如此。第四个元素换行。我必须将宽度增加到 510 才能将其放入一行。

为什么？

即使有萤火虫我也找不到原因......

【问题讨论】：

它会换行吗？不适合我，不适合 sn-p 的输出。
我在 1 行中看到所有这些
能分享一下你用的是什么浏览器吗？因为在某些情况下似乎可以渲染。
@LionelT 当然。火狐 45.0.1
我怀疑您的字体大小与默认字体大小不同。如果你的 font-size 更大（比如超过 26px），那么它会环绕，因为两个内联块元素之间总是有一个空格（除非你在 HTML 中没有留出空格）。

标签： html css

【解决方案1】：

将display-inline 更改为float

.group div {
  width: 100px;
  height: 100px;
  background-color: orange;
  float: left;
  text-align: center;
  line-height: 100px;
  font-size: 3em;
  font-weight: bold;
  color: white;
  margin: 10px;
}

.wrap {
  width: 480px;
  height: 120px;
  background-color: #efefef;
}

<div class="wrap">
  <div class="group">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

【讨论】：

【解决方案2】：

inline-blocks 就像字符一样，这意味着空格也计入宽度。删除divs 之间的空格/换行符以获得你想要的东西。或者切换到其他布局方式，比如float: left。

【讨论】：

【解决方案3】：

您需要了解display: inline-block; 使用inline-block <div> 时的默认行为@ 自动从左侧和右侧占用一些空间以避免您需要使用letter-spacing: -4px; and font-size: 0; 的空间，然后您将获得正确的结果，请参阅sn-p

.group div {
  width: 100px;
  height: 100px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  font-size: 55px;
  font-weight: bold;
  color: white;
  margin: 10px;
  letter-spacing: 0;
}

.wrap {
  width: 480px;
  height: 120px;
  font-size: 0;
  letter-spacing: -4px;
  background-color: #efefef;
}

<div class="wrap">
  <div class="group">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

【讨论】：

【解决方案4】：

其他选项更改您的 HTML

.group div {
  width: 100px;
  height: 100px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  font-size: 3em;
  font-weight: bold;
  color: white;
  margin: 10px;
}

.wrap {
  width: 480px;
  height: 120px;
  background-color: #efefef;
}

<div class="wrap">
  <div class="group">
    <div>1</div><!--
--><div>2</div><!--
--><div>3</div><!--
--><div>4</div><!--
--></div>
</div>

【讨论】：

【解决方案5】：

当您将一些 block element 转换为 inline 或类似的 (inline-block) 时，您会使其对排版规则（空格、行高和其他内容）敏感。

解决您的问题的一个简单快速的方法是从您的 dom 中删除空格（如下所示）。

这篇文章是个好资源：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

.group div {
  width: 100px;
  height: 100px;
  background-color: orange;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  font-size: 3em;
  font-weight: bold;
  color: white;
  margin: 10px;
}

.wrap {
  width: 500px;
  height: 120px;
  background-color: #efefef;
}

<div class="wrap">
  <div class="group"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</div>

【讨论】：