Why it can set heights, but it doesn't look like <h1 /> elements, it feels like it's a semi-inline (inline: inline[text]-level) element. HTML 4 is described like this:
The following elements may also be considered block-level elements since they may contain block-level elements:
In this description, it seems that <li /> is a half-inline element. Of course, the elements similar to <td /> in this list have also brought me such doubts. Today I took a look at the default CSS for each browser. The result is this:
| Browsers | CSS |
|---|---|
| IE6/IE7 | li{display:block; } |
| IE8+ / Webkit / Firefox / Opera | li{display:list-item; } |
Here, it is basically clear. In the A-Grade browser except IE6/7, it is a half-inline element. When it comes to display:list-item; in fact, even though all A-Grade browsers are now supported, not many people use it. Why? Actually, it's useless. In Quirks Mode, PPK says this:
Live example:display: blockdisplay: list-itemdisplay: list-item
display: list-itemmeans that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI 's in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI 's).
Right. Actually, this is not very meaningful. But it also solved one of my doubts. Share it. If you have such doubts, maybe if you have bugs or other questions next time you Coding, you will probably be able to react quickly.