How to solve the problem of blank gap at the bottom of the picture with css

Problem description:

There is always a blank space below when quoting pictures, as shown in the figure below.

css code:

<style>
    .img-box {
        border: 2px solid red;
        width: 550px;
    }
</style>
<div class="img-box">
    <img src="./img.png" alt="">
</div>

Cause analysis:

Inline block elements will be aligned with the baseline of the text.

(Recommended tutorial: CSS tutorial)

Solution:

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

img {
    vertical-align: bottom;
}

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

g {
    display: block;
}

Recommended related video tutorials: css video tutorial

The above is the detailed content of How to solve the problem of blank gap at the bottom of the picture with css. For more information, please follow other related articles on the PHP Chinese website!