2

I'm totally beginner, but I really don't know why there is a space between the bottom of my image and my wrap div border!

What's this???

<div class="myItem">
<img src="https://picsum.photos/100">
</div>

.myItem {
    border: 5px solid blue;
    background: tomato;
}

https://jsfiddle.net/g7rvm0ub/1/

Ami
  • 49
  • 1
  • 5

2 Answers2

1

Add display:block to img will remove the bottom space, another approach is add vertical-align:middle to img.

hulufei
  • 737
  • 1
  • 6
  • 17
0

I'm not sure why the div is 5 pixels bigger than the the image, as I am a bit of a beginner as well, but one way to fix it is to decrease the size of the div using height: 100px.

Thonos
  • 1
  • 1