DIV没有填充"高于"其内容
我div只有一个高度为400px的图像.在div没有填充但它的高度是406px导致其下方的丑陋的灰色6像素横条纹img.
灰色的原因background是可比较的divs可能包含其下方的标题img.
是什么导致额外的6px,我怎么能摆脱它？
Ps我知道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;
}
设置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;
}