Gap between the IMG and the container bottom border (GAP)

Problem description:

In IE7, there is a distance (or gap) between the IMG and the div (block element ).

This problem occurs only in IE7, but not in IE8.

 

Solution:

Fa Bao 1:Define the image IMG label vertical-align: Bottom, vertical-align: middle, vertical-align: Top.

IMG {vertical-align: bottom ;} Magic Weapon 2:The font size in the container is defined as 0. Div {
Width: 110px;
Border: 1px solid #000000;
Font-size: 0
} Reason: By default, inline elements such as image text are aligned with the baseline of the parent element, while baseline has a certain distance from the parent side (this distance is related to font-size and font-family ), therefore, setting vertical-align: ToP/bottom/Text-top/Text-bottom can avoid this situation. Besides Li, other block elements include IMG.