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
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


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


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%;


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; }