html - 删除显示行内 block 中的底部空间

Question

这个问题在这里已经有了答案:





Image inside div has extra space below the image

(10 个回答)


9 个月前关闭。




我到处寻找并尝试了所有可能的解决方案，但什么也没有。

我正在制作一个带有另一个 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>