Leçon 10 : Margin et padding
Dans la leçon précédente, nous introduisions le modèle des boîtes. Dans cette leçon, nous verrons comment changer la présentation
des éléments avec les propriétés margin et padding.
Fixer la marge d'un élément
Un élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et inférieur ("bottom"). La marge est la distance entre chaque côté et l'élément avoisinant (ou les bordures du document). Cf. également l'illustration dans la leçon 9.
Comme premier exemple, nous allons voir comment définir les marges du document même, c'est-à-dire de l'élément <body>.
L'illustration suivante montre les marges voulues pour les pages.
Le code CSS serait le suivant :
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Ou bien plus élégant et concis :
body {
margin: 100px 40px 10px 70px;
}
Vous pouvez fixer pareillement les marges sur presque tous les éléments. Par exemple, on peut choisir de définir
les marges de tous les paragraphes de texte balisés avec <p> :
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Fixer l'espacement dans un élément
L'espacement peut aussi être assimilé à un « remplissage ». Cela peut se comprendre dans la mesure où l'espacement n'affecte pas la distance de l'élément aux autres éléments mais définit seulement la distance interne entre la bordure et le contenu de l'élément.
L'utilisation de l'espacement peut être illustrée par ce simple exemple où tous les titres ont des couleurs d'arrière-plan :
h1 {
background: yellow;
}
h2 {
background: orange;
}
En définissant l'espacement des titres, on change le remplissage autour du texte dans chaque titre :
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Résumé
Vous commencez à maîtriser le modèle des boîtes dans CSS. Dans la leçon suivante, nous étudierons de plus près comment colorier les différentes bordures et comment dessiner le contour des éléments.