Question

看看代码。 div下方有一个包含图像的空白区域。我该如何删除它？如果我删除doctype，则会删除空格。但我需要doctype。
编辑：我也希望.container为“inline-block”并将其更改为“block”只会将div下面的空格替换为.container的下半部分，并且不会将其删除。抱歉英语不好。

<!doctype html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: inline-block;
  width: 100%;
  background: #000;
  color: #fff;
}
.container img {
  display: block;
}
</style>
</head>
<div class="container">
  <img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
  123
</div>

Answer 1

block使用.container。

<!doctype html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: block;
  background: #000;
  color: #fff;
}
.container img {
  display: block;
}
</style>
</head>
<div class="container">
  <img src="https://openclipart.org/assets/images/images/openclipart-banner.png" />
</div>
<div class="container">
  123
</div>

Answer 2

只需将vertical-align: top添加到.container类。

Answer 3

将阻止添加到容器中：

.container {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
}

Answer 4

向元素添加display:block;可以解决问题。

如何清除图像下方的空白区域？

4 个答案: