Gabriel Torres Villalón Gabriel Torres Villalón - 9 months ago 49
CSS Question

Remove bottom space in display inline-block

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 Source

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>