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

Question

我到处都看过了，并且尝试了所有可能的解决方案，但是什么也没有。

我正在制作一个滚动div，里面有另一个div。 当我编写“ display：inline-block”时，每个div都会添加右边界和底边界。 我可以删除右边距（在同一代码行中写入每个div），但是我也需要删除底部边距。 我怎样才能做到这一点？

这是我的HTML和CSS代码： 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;

}

谢谢你们！

Answer 1

设置vertical-align: top; 在.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>