Pour chaque élément html on peut donc définir l'espacement qui le séparera des autres éléments "margin" et les espacements intérieurs dont il peut bénéficier "padding".
On peut désigner précisément à quel coté on appliquer une marge, interne ou externe.
Voici comment définir les marges externes :
margin-top: le haut.
margin-right: à droite.
margin-bottom: en bas.
margin-left: à gauche.
Voici comment définir les marges internes :
padding-top: le haut.
padding-right: à droite.
padding-bottom: en bas.
padding-left: à gauche.
Si vous avez différentes tailles vous pouvez écrire:
padding: 8px 0 6px 2px;
Si margin est suivi d'une valeur alors cette dernière sera appliquée à toutes les marges.
Si margin est suivi de deux valeurs alors la première sera appliquée aux marges verticales et la seconde aux marges horizontales.
Si margin est suivi de quatres valeurs alors elles correspondent dans l'ordre aux marges margin-top, margin-right, margin-bottom, margin-left
On démarre du haut puis on tourne dans le sens horaire.
Les marges gauches d'un ul ou ol sont gérés différement suivant les navigateurs.
Firefox, Mozilla, Netscape utilisent pour faire une marge droite padding-left.
et
Internet Explorer et Opéra utilisent pour faire une marge droite margin-left.
Ce qui occasionne un décalage dans votre liste à puce dans un sens ou un autre suivant si vous utilisé margin ou padding.
Pour palier se problème on opèrera de la sorte, cela fonctionne sur toutes les navigateurs :
ul {margin-left: 10px; padding-left: 0;}
//ou
ul {margin-left: 0; padding-left: 10px;}