Unwanted padding under images

by alessandro_pezzato

HTML

<div class="catalog">
    
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/200px-Example_image.svg.png" />
</div> <!-- /.item -->
    
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/200px-Example_image.svg.png" />
</div> <!-- /.item -->
    
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Example_image.svg/200px-Example_image.svg.png" />
</div> <!-- /.item -->
       
<div class="item">
    <div class="text"><p>Some text</p></div>
</div> <!-- /.item -->
    
<div class="item">
    <canvas width="320" width="240"></canvas>
</div> <!-- /.item -->
    
</div> <!-- /.catalog -->

CSS

* {
    font-family: sans-serif;
}
body {
    background: black;
}
.catalog {
    background: blue;
}
.item {
    background: green;
    float: left;
}
.text {
    background: white;
    color: black;
}
canvas {
    background: white;
}