h2o h2o - 6 months ago 9
CSS Question

Why is there padding at the bottom of my image?

I am using this CSS/HTML combo to emulate a two column layout:

HTML



<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="two-cols">
<div class="left-col">
<img src="http://stott.customer.netspace.net.au/images/aurora2.jpg" alt="Image"/>
</div>
<div class="right-col">
Text
</div>
</div>
</body>
</html>


CSS



.two-cols {
border: 1px solid black;
display: table;
width: 100%;
}

.left-col, .right-col {
display: table-cell;
width: 50%;
}

img {
width: 300px;
height: 200px;
padding: 0;
margin: 0;
}


JSBin here.

But there's an unwanted padding at the bottom of my image:

Result

Any ideas why am I getting that and how can I get rid of that?

Answer

The default vertical-align is baseline that is applied to img as well. Make it bottom and it works:

img {
    vertical-align: bottom;
}