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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: box-sizing
slug: Web/CSS/box-sizing
tags:
- Boîtes
- CSS
- Mocèle de Boîte CSS
- Propriété CSS
- Reference
- border-box
- box-sizing
- content-box
- height
- modèle de boîte
- size
- width
translation_of: Web/CSS/box-sizing
---
<div>{{CSSRef}}</div>
<p>La propriété CSS <strong><code>box-sizing</code></strong> définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec <a href="/fr/docs/CSS/Modèle_de_boîte">le modèle de boîte CSS</a>).</p>
<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (<em>content box</em>) de l'élément. Si l'élément possède une bordure (<em>border</em>) ou du remplissage (<em>padding</em>), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.</p>
<p>La propriété <code>box-sizing</code> peut être utilisée afin d'ajuster ce comportement :</p>
<ul>
<li><code>content-box</code> est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.</li>
<li><code>border-box</code> indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.</li>
</ul>
<div class="blockIndicator note">
<p><strong>Note :</strong> Il est souvent utile de définir <code>box-sizing</code> à <code>border-box</code> aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la <code>position: relative</code> ou <code>position: absolute</code>, l'utilisation de <code>box-sizing: content-box</code> permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
box-sizing: content-box;
box-sizing: border-box;
/* Valeurs globales */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
</pre>
<p>La propriété <code>box-sizing</code> peut être définie avec l'un des mots-clés suivants.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>content-box</code></dt>
<dd>C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (<em>padding</em>)). Ainsi, <code>.box {width: 350px; border:10px solid black;}</code> fournira une boîte dont la largeur vaut <code>370px</code>.</dd>
<dt><code>border-box</code></dt>
<dd>Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (<em>padding</em>), la bordure, mais pas la marge. C'est le <a href="/fr/docs/CSS/Modèle_de_boîte">modèle de boîte</a> utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser <code>border-box</code> pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (<em>padding</em>) et du contenu.<br>
<br>
Ici, les dimensions de l'élément sont calculées comme suit : <em>largeur = bordure + marge interne + largeur du contenu</em>, et <em>hauteur = bordure + marge interne + hauteur du contenu</em>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<div class="blockIndicator note">
<p>Note : La valeur <code>padding-box</code> a été dépréciée.</p>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
Largeur de la boîte de contenu : 160px
Hauteur de la boîte de contenu : 80px */
}
.border-box {
box-sizing: border-box;
/* Largeur totale : 160px
Hauteur totale : 80px
Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","auto","200")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.box-sizing")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Apprendre : Le modèle de boîte CSS</a></li>
</ul>
|
