Reprinted from: http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

This is caused by line-height and vertical-align and is called ghost blank node. The solutions are as follows:

• Disable vertical-align

  • img { display: block; }

• vertical-align Default is baseline, change it to anything else

  • img { vertical-align:middle; }

• Modify line-height value directly

  • a { line-height: 5px; }

• Modify font-size

  • a { font-size: 0; }

Add a style to the a tag font-size=0px

Give you a plan, img{vertical-align:bottom}, the reason is this, the picture is aligned by the baseline by default. In fact, you cannot understand that the entire height is supported by the height of img. You should understand Because it is supported by line-hieght. The specific content can be found upstairs~ If you have nothing to do, read more of the blogs of great people! If you don’t accept it, please give it a like~

1. a element is an inline element

2. img is an inline replacement element

3. The height of the img element will affect the row height of the element in the line it is in

4. Inline elements are aligned vertically in a baseline manner by default. If the inline element does not have a baseline, such as an img element, then the bottom of the element can be aligned with the parent element's baseline
   5. The a element is directly placed into an img element. It looks like there is no text. In fact, when the browser renders , it will be considered that a blank character is placed in the a element to form an alignment baseline

Img defaults to baseline alignment, with an extra 0.25em height at the bottom. You can set img as a block-level element, or you can set the alignment to bottom to solve this problem