删除显示屏内联块中的底部空间 [英] Remove bottom space in display inline-block

问题描述

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

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

我正在制作一个滚动div，里面有另一个div.当我编写"display:inline-block"时，每个div都增加了右边距和底部边距.我可以删除右边距(在同一代码行中写入每个div)，但是我也需要删除底部边距.我该怎么办?

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?

这是我的HTML和CSS代码: https://jsfiddle.net/1ykbj8b4/

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;

}

谢谢大家！

推荐答案

在 .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>

这篇关于删除显示屏内联块中的底部空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！