Menu
I have a div containing only an image with a height of 400px. The div has no padding but it's height is 406px causing an ugly grey 6px horizontal stripe below its img.
The reason for the grey background is that comparable divs may contain a caption beneath their img.
What causes the extra 6px and how can I get rid of it?
P.s. I'm aware the HTML markup is not semantic/HTML5 but I'd rather not change it.
The basic markup is
<body>
<div>
<div class='img w960'>
<img src='timg-960-480.png' alt=''>
</div>
</div>
</body>
The CSS for this example is
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;
}
923
Set line-height: 0 on your div.img. This will affect the image caption h3 but you can correct that with an extra CSS line. The image is set inline and sits on the text baseline.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
