移除顯示屏內嵌塊的底部空間

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>