IMG Compatibility issues There will always be gaps between CSS pictures and pictures

Solution:

Magic One: Define the picture img tag vertical-align:bottom,vertical-align:middle,vertical-align:top.

Img{vertical-align:bottom;}As for the HTML attribute align= "center" (for the picture browser will be processed into align= "middle") solution, is equivalent to vertical-align:middle; so the truth is the same, As long as the vertical-align does not take baseline, the void disappears.  Magic Weapon Two: the font size in the definition container is 0. Div {
width:110px;
border:1px solid #000000;
font-size:0
} It is said that the reason:inline elements, such as picture text, are aligned by default with the parent element's baseline, while baseline has a certain distance from the parent's bottom (the distance is related to font-size,font-family), so the vertical-align is set: Top/bottom/text-top/text-bottom can prevent this from happening. And not only Li, but also the other block elements include IMG in this phenomenon.

IMG Compatibility issues There will always be gaps between CSS pictures and pictures