How can I get away with this weird space? [duplicate]-CodePudding

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/

CodePudding user response：

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

CodePudding user response：

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.