Today, in the debug code, I encountered a CSS problem. Notice that there are some gaps. Previously encountered such problems, I generally practice is directly add display:block to solve, today in-depth analysis of the reasons.
First look at this gap corresponds to the source code as follows
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
The code does not seem to have any problems, then the problem really comes:
Picture text and other inline elements are aligned to the baseline of the parent element by default, and the baseline has a certain distance from the parent's bottom ( this distance is related to the font-size,font-family, not necessarily 5px), so setting vertical-align:top/bottom/text-top/text-bottom can prevent this from happening. And not only Li, but also the other block elements including IMG will have this phenomenon.
Display:block the picture
Set img as "Display:block;". In this example, add a set of CSS code: "img {display:block;}". A more common practice.
Set the alignment of a picture
That is, setting the Vertical-align property of a picture to "Top,text-top,bottom,text-bottom" can also resolve
Set the parent object text size of a picture to 0px
"FONT-SIZE:0;" can solve the problem. However, this raises a new problem, and the text in the parent object cannot be displayed. Even if the text part of the quilt, set child object text size can still be displayed, but in the CSS when the time will prompt text too small error.
Set the float of a picture
In this case, add a line of CSS code: "#sub img {float:left;}". This approach is a good choice if you want to implement a graphic mix.
I prefer to set floats or block shows, and some people prefer to use vertical-align to solve them.
