Question

我在div上方有一个图像，但是div和图像之间有很小的空间。我希望两者之间没有空间。怎么做？

我尝试使用不同的位置组合：绝对；和位置：相对；我也尝试过设置边距：0;

.headImage {
  width: 100%;
  margin: 0;
}

.headRow {
  margin: 0;
  width: 100%;
  height: 110px;
  background-color: #333;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 30px;
  border-bottom: 3px solid #b00;
}

<img class="headImage" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9745b651-cc8b-4a7b-9cad-4082a65b2ec8-profile_banner-480.png">
<div class="headRow">
  <div class="logo">
    <image id="logo" src="mushu.png">
  </div>
  <div class="name">
    <h1 id="name">
      Mushu
    </h1>
  </div>
</div>

我希望图像直接位于div的顶部，并且两者之间没有空格。

Answer 1

将img设置为display:block;width:100%

.headRow {
  background: red;
}

img {
  display: block;
  width: 100%
}

h1 {
  margin: 0
}

<img class="headImage" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9745b651-cc8b-4a7b-9cad-4082a65b2ec8-profile_banner-480.png">
<div class="headRow">
  <div>
    <img src="mushu.png">
  </div>
  <div>
    <h1>
      Mushu
    </h1>
  </div>
</div>

如何将图像直接堆叠在div上？

1 个答案: