Spacing issues of li tags and the best way to write them

Create a new simple HTML test file and test the ul li tag below.

Test 1. Define css as the following code, the effect is as follows

It was found that there is a blank space on the left side under both IE5 and IE5.5, and under IE5, the line spacing between LI is blank, as shown below

Test 2. Define css as the following code

Compared with test one, just placing width:120px; from the definition of ul to the definition of li solves the problem of blank space on the left side of IE5 and IE5.5, but there is still a gap between the li of IE5. As shown below

Test 3. Define css as the following code

Compared with the second test, add vertical-align: bottom to the definition of li; it is normal under IE5, the blank line spacing between li disappears, and the effect is the same in each browser, as shown below

Summarize

1. How to solve the problem that li generates blank line spacing under IE5: If li defines a width, then you need to define vertical-align: bottom; in li.

2. It is best not to define the width in UL, but in LI or the DIV outside UL.

3. The best way to write LI is to write height and width inside li, as well as vertical-align: bottom; (for ie5/win bug), or add a layer of div outside ul and define the width, then inside li There is no need to define the width and vertical-align: bottom;, and the display will be normal (no blank line spacing will be generated under IE5), but the height still needs to be defined.