no-space

Tres soluciones al espacio extra en divs sin altura declarada y elementos en línea en su interior.

by kseso

HTML

<p><span>font-size: 0;</span><span>line-height: 0;</span><span>img vertical-align: top;</span></p>
<div class="uno">
    <img src="http://lorempixel.com/300/200/fashion/2" alt="" />
</div>
<div class="dos">
    <img src="http://lorempixel.com/300/200/fashion/4" alt="" />
</div>
<div class="tres">
    <img src="http://lorempixel.com/300/200/fashion/5" alt="" />
</div>

CSS

body {text-align: center}
body > div {
    vertical-align: top;
}
div {
    margin: 0 5px;
    width:28%;
    border: 5px solid red;
    background: yellow;
    display: inline-block;
}
div img {
    width: 100%;
}
.uno {
    font-size: 0;
}
.dos {
    line-height: 0;
}
.tres img {
    vertical-align: top;
}
p {text-align: center;
    background: tomato;
    margin-bottom: 5px;
}
p span {
    width:30%;
    display: inline-block;
    font-family: verdana;
    font-size: 1.1rem;
    vertical-align: middle;
}