Question

我有div只包含高度为400px的图像。 div没有填充，但它的高度为406px，导致其img下方的灰色6px水平条纹。

灰色background的原因是，可比的div可能在其img下方包含标题。

是什么导致额外的6px，我怎么能摆脱它？

P.S。我知道HTML标记不是语义/ HTML5，但我不想改变它。

基本标记是

<body>
<div>
    <div class='img w960'>
        <img src='timg-960-480.png' alt=''>
    </div>
</div>
</body>

此示例的CSS是

body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}

div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
}

div.w960{
position:relative;
left:-7em;
}

div.w960 img{
width:40em;
}


div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}

enter image description here

Answer 1

在line-height: 0上设置div.img。这会影响图片标题h3，但您可以使用额外的CSS行进行更正。图像是内嵌设置的，位于文本基线上。

body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}

div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
line-height: 0;
}

div.w960{
position:relative;
left:-7em;
}

div.w960 img{
width:40em;
}


div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}

Answer 2

我总是通过将图片的显示属性设置为阻止（display: block;）来解决这个问题。

DIV没有填充＆＃34;更高＆＃34;比它的内容

2 个答案: