html - 为什么蓝色框上方有一个空格？

Question

我想创建一些div；但是在并排放置两个 div 之后，下一个 div 前面有空格。它不应该在那里。

为什么蓝色div前面有空格？检查图像，由于较低的 rep，我无法直接添加图像。

有没有更好的方法来绘制布局？

我是初学者。

输出

Image of layout

div {
  color: green;
  height: 80px;
  width: 400px;
  border: thin solid #333;
}

#redbox {
  height: 80px;
  width: 200px;
  background-color: red;
}

#yellowbox {
  height: 80px;
  width: 80px;
  margin-right: 12px;
  background-color: yellow;
  display: inline-block;
}

#greenbox {
  height: 80px;
  width: 100px;
  background-color: green;
  display: inline-block;
}

#bluebox {
  height: 80px;
  width: 200px;
  background-color: blue;
}

<div>GOOGLE</div>
<div id="redbox"></div>
<div id="yellowbox"></div>
<div id="greenbox"></div>
<div id="bluebox"></div>

Answer 1

因为inline-block就像文本一样，默认位于基线上。

参见:https://www.w3.org/wiki/CSS/Properties/vertical-align

The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

Description

Values baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit .

Initial value baseline

Applies to inline-level and 'table-cell'

elements Inherited No

因此，如果您重置他们的 vertical-align至 top或 bottom它将消除字母所需文本所使用的间隙，例如 g j p q y .

您可能还想阅读有关 line-height 的内容(默认值是 font-size X 1.2 = 1.2em 设置的平均值)

div {
  color: green;
  height: 80px;
  width: 400px;
  border: thin solid #333;
}

#redbox {
  height: 80px;
  width: 200px;
  background-color: red;
}

#yellowbox {
  height: 80px;
  width: 80px;
  margin-right: 12px;
  background-color: yellow;
  display: inline-block;
  vertical-align:top;
}

#greenbox {
  height: 80px;
  width: 100px;
  background-color: green;
  display: inline-block;
  vertical-align:bottom;
}

#bluebox {
  height: 80px;
  width: 200px;
  background-color: blue;
}

<div>GOOGLE</div>
<div id="redbox"></div>
<div id="yellowbox"></div>
<div id="greenbox"></div>
<div id="bluebox"></div>

我使用了顶部和底部，效果很好，因为每个盒子都有相同的高度，最好是使用一个或另一个