Cette page explique comment utiliser CSS pour contrôler l'espace occupé par un élément lorsqu'il est affiché.
Dans votre document d'exemple, vous changerez l'espacement et ajouterez des règles décoratives.
Information : les boîtes
Lorsque votre navigateur affiche un élément, celui-ci prend une certaine place. L'espace occupé est divisé en quatre parties.
Au centre, l'espace dont l'élément a besoin pour afficher son contenu. Autour du contenu, il y a des marges internes (padding). Autour des marges internes, il y a une bordure (border). Autour des bordures, il y a des marges extérieures (margin).
| margin border padding élément Une partie de la mise en page est visible en gris. |
élément Ce qui apparait dans le navigateur. |
Les marges intérieures, les bordures et les marges extérieures peuvent avoir des tailles différentes en haut, à droite, en bas et à gauche de l'élément. Chacune de ces tailles peut être zéro.
Les marges intérieures sont toujours de la même couleur que le fond de l'élément. Lorsque vous choisissez la couleur de fond, vous appliquez donc la couleur à l'élément lui-même et à ses marges intérieures. Celles-ci sont toujours transparentes.
| margin border padding élément L'élément a un fond vert. |
élément Ce qui apparaît dans le navigateur. |
Bordures
Vous pouvez utiliser des bordures pour décorer des éléments avec des lignes ou des encadrements.
Pour spécifier la même bordure tout autour d'un élément, utilisez la propriété border. Spécifiez l'épaisseur (habituellement en pixels pour l'affichage à l'écran), le style et la couleur.
Les styles sont :
solid (trait plein) | dotted (pointillés) | dashed (trait interrompu) | double (trait double) |
inset (creux) | outset (en relief) | ridge (bordure en relief) | groove (bordure en creux) |
Vous pouvez également définir le style à none ou hidden pour enlever explicitement la bordure, ou mettre sa couleur à transparent pour rendre celle-ci invisible sans changer la mise en page.
Pour spécifier les bordures un côté à la fois, utilisez les propriétés : border-top, border-right, border-bottom, border-left. Vous pouvez utiliser celles-ci pour spéficier une bordure d'un seul côté, ou différentes bordures sur différents côtés.
Cette règle change la couleur de fond et la bordure supérieure des éléments de titre : h3 {
border-top: 4px solid #7c7; /* vert moyen */
background-color: #efe; /* vert pâle */
color: #050; /* vert foncé */
}
Le résultat ressemble à ceci :
img {border: 2px solid #ccc;}
Le résultat ressemble à ceci :
|
Marges intérieures et extérieures
Utilisez les marges pour ajuster les positions des éléments et pour créer de l'espace autour d'eux.
Utilisez les propriétés margin et padding pour changer respectivement la largeur des marges extérieures et intérieures.
Si vous spécifiez une seule largeur, elle s'applique tout autour de l'élément (en haut, à droite, en bas et à gauche).
Si vous spécifiez deux largeurs, la première s'applique en haut et en bas, la seconde sur les côtés droits et gauches.
Vous pouvez spécifier les quatres largeurs dans cet ordre : haut, droite, bas, gauche.
Cette règle marque les paragraphes de la classe remarque en leur donnant une bordure rouge tout autour. Une marge intérieure (padding) sépare légèrement cette bordure du texte. Une marge extérieure (margin) à gauche met le paragraphe en retrait par rapport au reste du texte : p.remarque {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
Le résultat ressemble à ceci :
|
| Lorsque vous utilisez des marges pour ajuster la façon dont les éléments sont placés, vos règles de style interagissent avec les réglages par défaut du navigateur de différentes manières, qui sont parfois complexes. Différents navigateurs peuvent placer les éléments différemment. Le résultat peut sembler similaire jusqu'à ce que votre feuille de style change des choses, et celle-ci peut parfois donner des résultats surprenants. Pour obtenir le résultat voulu, il se peut que vous ayez à changer le balisage de votre document. La page suivante de ce tutoriel donne plus d'informations à ce sujet. Pour des informations détaillées à propos des marges et des bordures, consultez Box model dans la spécification CSS. |
Action : ajout de bordures
Éditez votre fichier CSS. Ajoutez cette règle pour dessigner une ligne en travers de la page au dessus de chaque titre :
h3 {border-top: 1px solid gray;}
Si vous avez tenté le challenge sur la page précédente, modifiez la règle que vous aviez créée, sinon ajoutez cette nouvelle règle pour ajouter de l'espace sous chaque élément de liste :
li {
list-style: lower-roman;
margin-bottom: 8px;
}
Actualisez dans votre navigateur pour voir le résultat :
| (A) Les océans
(B) Paragraphes numérotés 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
Ajoutez une règle à votre feuille de style pour entourer les océans d'une bordure épaisse dans une couleur rapellant celle de la mer — quelque chose comme ceci :
(Il n'est pas nécessaire de retrouver exactement la même épaisseur et la même couleur qu'ici.) |
Pour continuer
Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.
En spécifiant des marges, vous avez modifié la mise en page de votre document. À la page suivante, vous apprendrez d'autres manières de changer celle-ci : Mise en page.