Question

我想创建一些div;但是在将两个div并排放置之后，下一个div在它之前有空间。它不应该存在。

为什么蓝色div之前的空间？检查图像，由于代表较低，我无法直接添加图像。

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

我是初学者。

输出

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

因为inline-block就像文本一样，通过defaut站在基线上。

请参阅：https://www.w3.org/wiki/CSS/Properties/vertical-align

vertical-align属性会影响由内联级元素生成的框的线框内的垂直位置。

<强>描述

值 baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit。

初始值基线

适用于内联级和＆＃39; table-cell＆＃39;

元素继承否

因此，如果您将vertical-align重置为top或bottom，则会删除g j p q y等字母所需文字所使用的间隔。

您可能还想阅读line-height（默认值是按字体大小X 1.2 = 1.2em设置的平均值）

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我使用顶部和底部，它工作正常，因为每个盒子有相同的高度，最好是使用一个或另一个

为什么蓝框上方有空格？

1 个答案: