图片下方的空白区域

23 浏览
0 Comments

图片下方的空白区域

我在我的CSS项目中遇到了一些问题。

我尝试在一个div中放置一张图片，但是图片下方出现了一个白色空白区域。

这是我的HTML代码：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#top {
  border: solid;
}
#page-top {
  border: solid;
  width: 1028px;
  background: yellow;
  margin: 0 auto;
}
#page-top img {
  width: 30%;
  border: solid;
  display: inline-block;
}

0

1 答案

0 Comments

图片下方出现空白的原因是内联元素的默认垂直对齐方式是基线（baseline），它会为下降的文本元素保留空间。解决方法是将垂直对齐属性设置为top或middle。

以下是解决这个问题的代码：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#top {
  border: solid;
}
#page-top {
  border: solid;
  width: 1028px;
  background: yellow;
  margin: 0 auto;
}
#page-top img {
  width: 30%;
  border: solid;
  display: inline-block;
  vertical-align: middle;
}

以上代码中，我们通过将`vertical-align`属性设置为`middle`来解决问题。这将使图片在垂直方向上与周围的元素居中对齐，消除了图片下方的空白。

0