This question already has answers here:
Image inside div has extra space below the image
                                
                                    (9个答案)
                                
                        
                                5小时前关闭。
            
                    
由于某种原因,标题和节之间的白线可见,我不知道为什么会出现它,我仔细检查了一下,它是内容的一部分,而不是填充,并且我不知道如何删除它标头本身和下面的部分之间没有这条线,有人可以看一下我是否在代码中错过了什么?



header {
  position: relative;
}

.headImage {
  width: 100%;
  height: 100%;
}

<header>
  <img class="headImage" src="../images/Corson.with.wings.png" alt="Head Image">
</header>

最佳答案

我添加了3个解决方案来解决该问题,因为图像的默认vertical-align值为baseline;并且img被视为inline元素



body {
  background: url(https://placeimg.com/640/480/nature);
  background-size: cover;
}

.header {
  position: relative;
  width: 100px;
  margin: 10px;
  background: red;
  float:left;
}

.headImage {
  width: 100%;
  height: 100%;
}

.header.block img {
  display: block; /* this will set image as a block */
}

.header.v-align img {
  vertical-align: middle; /* this will align the inline element in the middle */
}

.header.f-left img {
  float:left; /* in this case you will need to clear floats */
}

<div class="header">
  <img src="https://placeimg.com/100/100/any" />
</div>

<div class="header block">
  <img src="https://placeimg.com/100/100/any" />
</div>

<div class="header v-align">
  <img src="https://placeimg.com/100/100/any" />
</div>

<div class="header f-left">
  <img src="https://placeimg.com/100/100/any" />
</div>

关于html - 页眉和节之间的白线可见,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59768531/

10-12 07:41
查看更多