Test CSS par défaut ul/li

by lespacedunmatin

HTML

<p>Test pour comprendre pourquoi la CSS reset de HTML5 boilerplate cible les ul et pas les li.</p>
<p>Et effectivement, IE 6 &amp; 7 utilisent un margin sur le ul là où les autres utilisent un padding.</p>

<ul>
    <li>ul normal</li>
    <li>Toto</li>
    <li>Tata</li>
    <li>Tutu</li>
</ul>
<ul id="ulMargin">
    <li>ul margin</li>
    <li>Toto</li>
    <li>Tata</li>
    <li>Tutu</li>
</ul>
<ul id="ulPadding">
    <li>ul Padding</li>
    <li>Toto</li>
    <li>Tata</li>
    <li>Tutu</li>
</ul>
<ul id="liMargin">
    <li>li Margin</li>
    <li>Toto</li>
    <li>Tata</li>
    <li>Tutu</li>
</ul>
<ul id="liPadding">
    <li>li Padding</li>
    <li>Toto</li>
    <li>Tata</li>
    <li>Tutu</li>
</ul>

CSS

ul {
    border: 1px solid blue;
    margin-top: 1em;
}
li {
    border: 1px solid red;
}
#ulMargin {
    margin-left: 40px;
    padding-left: 0;
}
#ulPadding {
    margin-left: 0;
    padding-left: 40px;
}
#liMargin li {
    margin-left: 40px;
    padding-left: 0;
}
#liPadding li {
    padding-left: 40px;
}