1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: Boîtes
slug: CSS/Premiers_pas/Boîtes
tags:
- CSS
- 'CSS:Premiers_pas'
translation_of: Learn/CSS/Building_blocks
---
<p> </p>
<p>Cette page explique comment utiliser CSS pour contrôler l'espace occupé par un élément lorsqu'il est affiché.</p>
<p>Dans votre document d'exemple, vous changerez l'espacement et ajouterez des règles décoratives.</p>
<h3 id="Information_:_les_bo.C3.AEtes" name="Information_:_les_bo.C3.AEtes">Information : les boîtes</h3>
<p>Lorsque votre navigateur affiche un élément, celui-ci prend une certaine place. L'espace occupé est divisé en quatre parties.</p>
<p>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).</p>
<table> <tbody> <tr> <td style="width: 26em;"> <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 20em;"> <p style="text-align: center; margin: 0px;">margin</p> <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;">padding</p> <div style="background-color: #eee;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">élément</p> </div> </div> </div> <p><em>Une partie de la mise en page est visible en gris.</em></p> </td> <td> <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 20em;"> <p style="text-align: center; margin: 0px;"> </p> <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;"> </p> <div style="background-color: #fff;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">élément</p> </div> </div> </div> <p><em>Ce qui apparait dans le navigateur.</em></p> </td> </tr> </tbody>
</table>
<p>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.</p>
<p>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.</p>
<table> <tbody> <tr> <td style="width: 22em;"> <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> <p style="text-align: center; margin: 0px;">margin</p> <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;">padding</p> <div style="background-color: #ded;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">élément</p> </div> </div> </div> <p><em>L'élément a un fond vert.</em></p> </td> <td> <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> <p style="text-align: center; margin: 0px;"> </p> <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;"> </p> <div style="background-color: #efe;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">élément</p> </div> </div> </div> <p><em>Ce qui apparaît dans le navigateur.</em></p> </td> </tr> </tbody>
</table>
<h4 id="Bordures" name="Bordures">Bordures</h4>
<p>Vous pouvez utiliser des bordures pour décorer des éléments avec des lignes ou des encadrements.</p>
<p>Pour spécifier la même bordure tout autour d'un élément, utilisez la propriété <code>border</code>. Spécifiez l'épaisseur (habituellement en pixels pour l'affichage à l'écran), le style et la couleur.</p>
<p>Les styles sont :</p>
<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>solid</code> (trait plein)</div> </td> <td style="width: 6em;"> <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>dotted</code> (pointillés)</div> </td> <td style="width: 6em;"> <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>dashed</code> (trait interrompu)</div> </td> <td style="width: 6em;"> <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>double</code> (trait double)</div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>inset</code> (creux)</div> </td> <td style="width: 6em;"> <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>outset</code> (en relief)</div> </td> <td style="width: 6em;"> <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>ridge</code> (bordure en relief)</div> </td> <td style="width: 6em;"> <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>groove</code> (bordure en creux)</div> </td> </tr> </tbody>
</table>
<p>Vous pouvez également définir le style à <code>none</code> ou <code>hidden</code> pour enlever explicitement la bordure, ou mettre sa couleur à <code>transparent</code> pour rendre celle-ci invisible sans changer la mise en page.</p>
<p>Pour spécifier les bordures un côté à la fois, utilisez les propriétés : <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>. 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.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemples</caption> <tbody> <tr> <td>Cette règle change la couleur de fond et la bordure supérieure des éléments de titre : <div style="width: 40em;"> <pre class="eval">h3 {
border-top: 4px solid #7c7; /* vert moyen */
background-color: #efe; /* vert pâle */
color: #050; /* vert foncé */
}
</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td> <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Un titre avec du style</p> </td> </tr> </tbody> </table> <p><br> Cette règle rend les images plus faciles à voir en leur donnant une bordure grisée tout autour :</p> <div style="width: 30em;"> <pre class="eval">img {border: 2px solid #ccc;}
</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td>Image :</td> <td style="border: 2px solid #ccc;"><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> </tr> </tbody> </table> </td> </tr> </tbody>
</table>
<h4 id="Marges_int.C3.A9rieures_et_ext.C3.A9rieures" name="Marges_int.C3.A9rieures_et_ext.C3.A9rieures">Marges intérieures et extérieures</h4>
<p>Utilisez les marges pour ajuster les positions des éléments et pour créer de l'espace autour d'eux.</p>
<p>Utilisez les propriétés <code>margin</code> et <code>padding</code> pour changer respectivement la largeur des marges extérieures et intérieures.</p>
<p>Si vous spécifiez une seule largeur, elle s'applique tout autour de l'élément (en haut, à droite, en bas et à gauche).</p>
<p>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.</p>
<p>Vous pouvez spécifier les quatres largeurs dans cet ordre : haut, droite, bas, gauche.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemple</caption> <tbody> <tr> <td>Cette règle marque les paragraphes de la classe <code>remarque</code> en leur donnant une bordure rouge tout autour. <p>Une marge intérieure (padding) sépare légèrement cette bordure du texte.</p> <p>Une marge extérieure (margin) à gauche met le paragraphe en retrait par rapport au reste du texte :</p> <div style="width: 30em;"> <pre class="eval">p.remarque {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td> <p>Ceci est un paragraphe normal.</p> <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Ceci est une remarque.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> <caption>Plus de détails</caption> <tbody> <tr> <td>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. <p>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.</p> <p>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.</p> <p>Pour des informations détaillées à propos des marges et des bordures, consultez <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> dans la spécification CSS.</p> </td> </tr> </tbody>
</table>
<h3 id="Action_:_ajout_de_bordures" name="Action_:_ajout_de_bordures">Action : ajout de bordures</h3>
<p>Éditez votre fichier CSS. Ajoutez cette règle pour dessigner une ligne en travers de la page au dessus de chaque titre :</p>
<div style="width: 30em;"> <pre class="eval">h3 {border-top: 1px solid gray;}
</pre>
</div>
<p>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 :</p>
<div style="width: 30em;"> <pre class="eval">li {
list-style: lower-roman;
margin-bottom: 8px;
}
</pre>
</div>
<p>Actualisez dans votre navigateur pour voir le résultat :</p>
<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> <ul style=""> <li style="margin-bottom: 8px;">Arctique</li> <li style="margin-bottom: 8px;">Atlantique</li> <li style="margin-bottom: 8px;">Pacifique</li> <li style="margin-bottom: 8px;">Indien</li> <li style="margin-bottom: 8px;">Antarctique</li> </ul> <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody>
</table>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Challenge</caption> <tbody> <tr> <td>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 : <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> <div style="border: 12px solid #69b; padding-left: 1em;"> <ul style=""> <li style="margin-bottom: 8px;">Arctique</li> <li style="margin-bottom: 8px;">Atlantique</li> <li style="margin-bottom: 8px;">Pacifique</li> <li style="margin-bottom: 8px;">Indien</li> <li style="margin-bottom: 8px;">Antarctique</li> </ul> </div> <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B)Paragraphes numérotés</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Il n'est pas nécessaire de retrouver exactement la même épaisseur et la même couleur qu'ici.)</p> </td> </tr> </tbody>
</table>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>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 <a href="/Talk:fr/CSS/Premiers_pas/Boîtes" title="Talk:fr/CSS/Premiers_pas/Boîtes">page de discussion</a>.</p>
<p>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 : <strong><a href="/fr/CSS/Premiers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">Mise en page</a></strong>.</p>
<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "pl": "pl/CSS/Na_pocz\u0105tek/Bloki", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p>
|
