html - css布局问题，在firebug下<a>标签嵌入<img>标签但是高度<a>总比<img>多4个像素

Question

demo参考:http://huzerui.com
问题：
Firebug下a标签嵌入img标签，但是高度a标签始终比img标签多4个像素，a不是适应img的高度吗，这个4px怎么来的，可以去除吗？
如图：

一开始以为是默认样式有问题，添加了

*{
    margin:0;
    padding:0;
}

测试后没有用 然后就删了

<p>
    <a>
        <img>
    </a>
</p>

三个标签都没有高度 ，demo中p和a适应img的高度，定义了img为max-width:100%;

Answer 1

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

Answer 2

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

Answer 3

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~

Answer 4

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

Answer 5

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