一句话概括:为什么<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