一句话概括：为什么<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.
原文：
----------------------------------------------------------------------------------
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
|
||
|
This also works with
inline-block. Thanks for the explanation. |