Solve the problem of blank gap at the bottom of Img picture

When working on a recent project, I found that there was always a blank space below when referencing pictures, as shown in the figure below.

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>

<div class="img-box">
    <img src="./img.png" alt="">
</div>

Later I found out that the reason is that the inline block elements will be aligned with the text baseline. To solve this problem is actually very simple, there are two main methods:

1. Add vertical-align: middle | top | bottom, etc. to the image. (Recommended)

img {
    vertical-align: bottom;
}

2. Convert the image to a block-level element display: block; (Converting block-level elements may affect your layout, so the first method is recommended)

g {
    display: block;
} 

Well, the problem is solved so simply.
If you have any better methods, please feel free to share and leave a message in the comment area.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.