(padding)
et une bordure (border)
de 5px vous obtenez une boîte d'une largeur totale de 200px. C'est un modèle de boîte ancien et spécifique à Microsoft.Challenge : ne pas mettre de bordure ni pour le premier ni pour le dernier élément.
Nous aurions tout à fait pu attribuer une classe spécifique au premier / dernier élément
en jouant sur border-top
ou sur border-bottom
. De cette façon, les bordures aux extrémités auraient également été masquées. Voir ci-contre.
first-child
.<div class="test">
<ul class="borderul">
<li class="borderli"><a href="link" title="">description1</a></li>
<li class="borderli"><a href="link" title="">description2</a></li>
<li class="borderli"><a href="link" title="">description3</a></li>
<li class="borderli"><a href="link" title="">description4</a></li>
</ul>
</div>
.test{
width: 15%;
height: auto;
}
.borderul{
list-style-type: none;
}
.borderli{
border-top: 1px solid #FF0000;
margin: -1px 0 0 0;
text-align: center;
line-height: 25px;
font-size: 80%;
}
/*correspond au premier élément*/
.borderli:first-child{
border: 0;
}
Ainsi, la marge supérieure des éléments de liste étant à -1px, ça tombe bien puisque c'est justement la taille
de notre bordure haute. La marge suffira donc à masquer la bordure au lieu de la supprimer. Eh toc !