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