The height after using img in the a tag is 4px_html/css_WEB-ITnose

Two days ago, when I was working on a website, I found that the height after using img in the a tag increased by 4px, and I was confused.

Finally, after careful analysis, I finally found the reason. Because img is an inline element, the default display: inline; it is similar to the default behavior of text. The lower edge is aligned with the baseline instead of close to the container. lower edge. Setting displayp to block can eliminate the 4px BUG.

Now that the reason has been found, there must be more than one solution!

as follows:

1. Define the image as block (display:block)
2. Set a fixed height to the parent, and then overflow:hidden
3. Set font- size:0;
4. Set img's vertical-align: bottom;
5. Set img's margin-bottom: -4px;

That's it, it can be determined based on specific usage scenarios in the future The best solution.