Css layout problem, under firebug < a > tag embeds < img > tag but height < a > is 4 pixels more than < img >

  css3, question

Demo reference:http://huzerui.com
Question:
Under Firebug, the A label is embedded into the img label, but the height A label is always 4 pixels more than the img label. Isn’t A suitable for the height of the img? How did this 4px come from and can it be removed?
As shown in the figure:
图片描述
At first, I thought there was something wrong with the default style. I added

*{
 margin:0;
 padding:0;
 }

It didn’t work after the test and then it was deleted.

<div>
 <a>
 <img>
 </a>
 </div>

All three tags have no height. div and A in demo adapt to the height of img, and img is defined as max-width:100%;

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

This isline-heightAndvertical-alignCaused by, is calledGhost blank node, there are the following solutions:

  • Letvertical-alignFailure

    • img { display: block; }

  • vertical-alignThe default isbaseline, change to other

    • img { vertical-align:middle; }

  • Direct modificationline-heightvalue

    • a { line-height: 5px; }

  • Modifyfont-size

    • a { font-size: 0; }