Dans la lecon precedente, nous introduisions le modele des boites. Dans cette lecon, nous verrons comment changer la presentation
des elements avec les proprietes margin et padding.
Un element a quatre cotes : droit ("right"), gauche ("left"), superieur ("top") et inferieur ("bottom"). La marge est la distance entre chaque cote et l'element avoisinant (ou les bordures du document). Cf. egalement l'illustration dans la lecon 9.
Comme premier exemple, nous allons voir comment definir les marges du document meme, c'est-a-dire de l'element <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 elegant et concis :
body {
margin: 100px 40px 10px 70px;
}
Vous pouvez fixer pareillement les marges sur presque tous les elements. Par exemple, on peut choisir de definir
les marges de tous les paragraphes de texte balises avec <p> :
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
L'espacement peut aussi etre assimile a un remplissage . Cela peut se comprendre dans la mesure ou l'espacement n'affecte pas la distance de l'element aux autres elements mais definit seulement la distance interne entre la bordure et le contenu de l'element.
L'utilisation de l'espacement peut etre illustree par ce simple exemple ou tous les titres ont des couleurs d'arriere-plan :
h1 {
background: yellow;
}
h2 {
background: orange;
}
En definissant 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;
}
Vous commencez a maitriser le modele des boites dans CSS. Dans la lecon suivante, nous etudierons de plus pres comment colorier les differentes bordures et comment dessiner le contour des elements.