h2o h2o - 7 months ago 13
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:


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


.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:


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


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

img {
    vertical-align: bottom;