1

I made a simple code on codepen.io and when I put some elements inside a Div, somehow there is still some kind of space between the bottom side of those elements and the div itself? How do you remove that space with css?

I could remove the gap/space between the img elements, by simply putting the code next to each other, with no space or enter characters. But, I've no idea how to remove the space between the bottom side of the img elements with the inner margin of the Div.

You could see my code here: https://codepen.io/matthewbusbee/pen/OYmede

HTML file

<div>
  <img src="https://www.freeiconspng.com/uploads/cloud-outline-icon-23.png"><img src="https://www.freeiconspng.com/uploads/cloud-outline-icon-23.png"><img src="https://www.freeiconspng.com/uploads/cloud-outline-icon-23.png">
</div>

CSS file

div {
  background-color: #d2f3e0;
}

img {
  background-color: skyblue;
  width: 200px;
}

img {
  border: solid 1px;
}

I expect the space between the bottom side of the img elements and div could be removed, just like the top & left side of the img elements where there's no space. Thanks.

mattbushbee
  • 11
  • 2

1 Answers1

1

Try setting the wrapping div to display: inline-block - the default block means it will span 100% of its parent.

Also, set the images to vertical-align: middle as below.

div {
  background-color: #d2f3e0;
  display: inline-block;
}

img {
  background-color: skyblue;
  display: inline;
  width: 200px;
  vertical-align: middle;
}

img {
  border: solid 1px;
}
<div>
  <img src="https://www.freeiconspng.com/uploads/cloud-outline-icon-23.png"><img src="https://www.freeiconspng.com/uploads/cloud-outline-icon-23.png"><img src="https://www.freeiconspng.com/uploads/cloud-outline-icon-23.png">
</div>
David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
  • Thanks!!! Setting the "vertical-align" property of the img element to "middle" definitely solves it. Nullifying the div element line-height also works. – mattbushbee May 17 '19 at 11:33