Solve the IMG gap problem in the DIV

 

What should I do if there is a gap between the image IMG and the container's bottom boundary? Here is a simple solution in step 3. First, label the image IMG with display: block. IMG {display: block} 2. Define the font size in the container as 0. Div { Width: 110px; Border: 1px solid #000000; Font-size: 0 } Third, define the image IMG label vertical-align: Bottom, vertical-align: middle, vertical-align: Top IMG {vertical-align: Bottom} In addition, you can set the bottom margin of an image to a negative value and rewrite the HTML Tag arrangement. I think the first three methods can be completely solved. The reason why there is a gap between the image and the container in IE I searched the internet and found what old9 said. By default, inline elements such as image text are aligned with the baseline of the parent element, while baseline has a certain distance (this distance is related to font-size and font-family, not necessarily 5px), so setting vertical-align: ToP/bottom/Text-top/Text-bottom can avoid this situation. Besides Li, other block elements include IMG. As for the HTML attribute align = "center" (the image browser will process it as align = "Middle"), it is equivalent to vertical-align: middle; so the same is true, as long as vertical-align does not take baseline, this gap disappears. Related Comments 1. There are several ways to display IE, which are declared at the beginning of the HTML document <! Doctype & hell; IP;.> If the statement is in strict mode, IE displays the document in W3C mode, and In W3C standards is an inline label by default, unless explicitly declared as a block 2. the gap is the default line-height and font-size for the box model of IE. to IMG desplay: block; although it can solve the problem, it does not take the structure into consideration. it can be regarded as a permanent cure

 

Solve the IMG gap problem in the DIV