Support de cours - Lita

En fait, chaque élément est contenu dans une boîte qui possède différents espacements,
internes (padding) et externes (margin), ainsi qu’une bordure (border).
Il est possible de changer la valeur des ces espacements par les propriétés Css suivantes,
qui acceptent les unités de longueur vues précédemment (ssec 2.2, p. 25) :
width, height,
padding-top, padding-right, padding-bottom, padding-left,
margin-top, margin-right, margin-bottom, margin-left,
border-top, border-right, border-bottom, border-left.
Par exemple :
strong {
}
margin-left: 10px;
padding-right: 20px;
Remarque Les unités de longueur relatives (%, em) le sont par rapport au bloc conteneur
de l’élément auxquelles elles sont appliquées (voir ci-après, par. 3, p. 33).
2.1 Application : centrage horizontal
Une valeur intéressante des marges est la valeur auto. Cette valeur indique au navigateur
de répartir l’espace restant disponible si l’élément est de type bloc 3 .
Ainsi, pour centrer horizontalement un élément par rapport à son bloc conteneur
(p. ex. une image dans un paragraphe), il suffit d’indiquer la valeur auto à ses marges
gauche et droite :
img {
}
display: block;
margin-left: auto;
margin-right: auto;
3 Les types de positionnement
Il est possible en Css de faire sortir les éléments du flux normal. On peut alors
contrôler précisément l’emplacement des éléments dans une page.
3. Si l’élément est de type en ligne, des marges auto sont nulles (0).
31