📜 ⬆️ ⬇️

Unnecessary indents in lists

If the elements of the list are displayed as inline, unnecessary indents appear between them.
Next, where they come from and how to fix it.

1. The browser renders not the code that you write, but the one that results from validating yours.
2. In some prehistoric standard (html 3.2 it seems) it was said that it is not necessary to close the LI tag.

IE so that it would be more convenient for him to render both closed and unclosed LI tags to one variant, of course not to a closed one. (And what do you expect from him?) After the closing LI tag, there is a line feed, it is identical to the space. This space is added to the text inside the LI. In normal browsers, this space is between the tags.
')
You can check here.



And it looks like this:
image

How to get rid of this ambiguity?
There are some answers:

1. write so
<ul><!--
--><li>Qwe</li><!--
--><li>Asd</li><!--
--><li>Zxc</li><!--
--></ul>


2. so
<ul>
<li>Qwe</li><li>Asd</li><li>Zxc</li></ul>

3. or so

<ul><li
>Qwe</li><li
>Asd</li><li
>Zxc</li></ul>


UPD:
It is written not about how to fix the next IE bug, but about how to make all browsers render the list in the same way.
Mozilla also inserted a space not just inside the LI, but between them.

Source: https://habr.com/ru/post/51297/


All Articles