Why is the height of a label several pixels higher than that of img ?, Label img

Why is the height of a label several pixels higher than that of img ?, Label img

<Li> <a href = "#">  </a> </li>
Style:

Li {
Height: 300px;
A {
Display: block;
Img {
Width: 100%;
Height: 100%;
     
}
}
}
Effect:

Knowledge supplement: by default, the width and height are the height of the lines in the inline element automatically calculated by the browser, so you can set the background color.
The height of the inline element is related to font-size, but not determined by font-size. It involves anonymous boxes, line boxes, line boxes, content areas, etc.

Answer 1:

Cause:

There is an anonymous text under Element a, and there is an anonymous row-level box outside the text. Some of its default vertical-align is baseline, and it is often affected by line-height, make it have a line-height, so that it has a height. Because of baseline alignment, this anonymous box will sink and open some distance down, so a is elevated.

Solution 1: Eliminate the height of the anonymous box, that is, set line-height: 0 or font-size: 0 for;
Solution 2: Give vertical-align: top to align top, rather than aleline.
Solution 3: Give the img a display: block so that it and the anonymous row-level box are not in the layout context, so there is no line-level box alignment problem.
There are also other solutions, but these are all fundamentally solving the problem. Answer 2: I finally found the reason, because img is a line element, the default display: inline; it is similar to the default behavior of text. The lower edge is aligned with the baseline, rather than sticking to the lower edge of the container. Setting displayp as a block eliminates the difference between the pixels mentioned above. Or set font-size to 0. You can also set the display of label a to block or inline-block, and set the line-height of label a to 0.