& Lt; img & gt; why is there blank at the bottom of the element ?, Img Blank

Why is there blank at the bottom of the element ?, Img Blank

Cause:

By default, inline elements such as image text are aligned with the baseline of the parent element, that is, the default value of vertical-align is baseline, while baseline has a certain distance from the parent bottom edge bottom;

The gap in img is the gap between baseline and bottom;Even if only the image has no text, the blank section of the inline image will exist.

The img label is an inline element, and the inline element is baseline aligned by default. When baseline is aligned, there is a gap between baseline and bottom;

Therefore, setting vertical-align values can avoid this situation.

The value between top and bottom is line-height. If line-height is set to 0, the distance between baseline and bottom is also changed to 0, and the blank space will disappear.

If line-height is not set, the default value of line-height is based on font-size, depending on the rendering engine, but usually multiplied by a coefficient (such as 1.2 ). Therefore, setting font-size to 0 without line-height can achieve the same effect. Of course, the consequence of doing so is that the text and text cannot be mixed.

Solution:

1. Set vertical-align;

img{vertical-align : bottom; // top, middle}

As longvertical-alignThe value is any of the three above to solve the gap problem.

2. Define the font size of the parent container of img to 0;

.main{ font-size : 0; }

3. Set the image as a block-level element;

img{display : block;}

Reference ::

Http://www.xiabingbao.com/css/2015/10/12/css-img-block
Https://segmentfault.com/q/1010000000694663
Https://www.zhihu.com/question/21558138