css中高度比img多出4px的问题

一句话概括：为什么<a>标签比里面的img高度多出4px 的问题，主要还是由于 img是inline element, it's height is caculated differently as related to the

default line-height value. On inline elements, the line-height css property specifies the height that is used in the calculation of the line box height.

on block level elements, line-height specifies the minimal height of line boxes within the element.

参考: http://stackoverflow.com/questions/11126685/why-does-container-div-insist-on-being-slightly-larger-than-img-or-svg-content

原文：

----------------------------------------------------------------------------------

Trying adding:

img { display: block; }

to your CSS. Since an <img> is an inline element by default, it's height is calculated differently as related to the default line-height value.

On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.

On block level elements, line-height specifies the minimal height of line boxes within the element.

Source: https://developer.mozilla.org/en/CSS/line-height

That does indeed fix it. Could you elaborate as to why it makes a difference? (I'm not holding out on accepting - SO won't let me until 11 more minutes have passed) – Chris Jun 20 '12 at 19:25 

 

@Chris - it's the reason I had given you: the img has an implicit line-height assigned to it, which gives it some vertical breathing room. Since line-height only applies to inline elements, setting the imgto display: block removes the line-height. – Joseph Silber Jun 20 '12 at 19:30

@Joseph - I hadn't seen your response when I made the above request. Since they are basically achieving the exact same thing directly and indirectly, there's not much to choose between the answers. It only seems fair to accept the answer that arrived first, but thanks for your explanation. – Chris Jun 20 '12 at 19:34

1

This also works with inline-block. Thanks for the explanation.