html - CSS 边距 : Why does this layout behave this way?

Question

我目前正在尝试自学一些 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 元素都是 100px 宽度加上 10px margin-left 和 10px margin-right。总和高达 120px。 4 乘以 120px 等于 480px。

=> 它应该适合宽度为 500 像素的环绕元素。

但事实并非如此。第四个元素换行。我必须将宽度增加到 510 以使其适合一行。

为什么？

即使使用 Firebug 我也找不到原因......

Answer 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>