移除显示屏内嵌块的底部空间

Question

I've looked everywhere and I have tried all possible solutions, but nothing.

I am making a scroll div with another divs inside. When I wrote "display:inline-block", each div add right and bottom margin. I can remove right margin (writing each div in the same code line), but also I need remove bottom margin. How can I do that?

Here my HTML and CSS code: https://jsfiddle.net/1ykbj8b4/

HTML:

<div id="contenedor">
    <div class="imagen" style="background-color:blue"></div>
    <div class="imagen" style="background-color:green"></div>
    <div class="imagen" style="background-color:orange"></div>
    <div class="imagen" style="background-color:brown"></div>
    <div class="imagen" style="background-color:red"></div>
</div>

CSS:

body {

    margin: 0;

}  

#contenedor {

    width: 500px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: black;

}

.imagen {

    width: 120px;
    height: 120px;
    display: inline-block;

}

Thank you all!

Answer 1

Set vertical-align: top; on .imagen

 body { margin: 0; } #contenedor { width: 500px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; background-color: black; } .imagen { vertical-align: top; width: 120px; height: 120px; display: inline-block; } 

 <div id="contenedor"> <div class="imagen" style="background-color:blue"></div> <div class="imagen" style="background-color:green"></div> <div class="imagen" style="background-color:orange"></div> <div class="imagen" style="background-color:brown"></div> <div class="imagen" style="background-color:red"></div> </div>