Propriétés CSS liées au modèle de boîte

Articles

Cet article explique les propriétés CSS liées au modèle de boîte.

Vous pouvez en apprendre davantage sur les cas d'utilisation et la syntaxe des propriétés comme width, height et margin.

YouTube Video

HTML pour l'aperçu

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

En rapport avec le modèle de boîte

Propriétés `width` et `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

Les propriétés width et height sont des propriétés CSS utilisées pour spécifier la largeur et la hauteur d'un élément. Elles sont particulièrement utilisées pour définir la taille des éléments de type bloc, des images, des vidéos, etc.

Dans la classe width-height-fixed, des valeurs fixes sont spécifiées pour la largeur et la hauteur.
Dans la classe width-height-percent, des valeurs en pourcentage sont spécifiées pour la largeur et la hauteur.

Valeurs pouvant être spécifiées

Les propriétés width et height peuvent avoir les valeurs suivantes.

auto : Taille par défaut. Ajuste automatiquement la taille par rapport à l'élément parent.
Valeurs fixes : Spécifie une largeur fixe en pixels, en pourcentages ou en unités relatives.(ex: 100px, 50%, 10rem)
- Par exemple, 250px définit une taille de 250 pixels pour l'élément, et 50% la définit à 50 % de la taille de l'élément parent.
min-content : S'ajuste à la taille minimale du contenu.
max-content : S'ajuste à la taille maximale du contenu.
fit-content : Ajuste la taille de l'élément de manière appropriée en fonction de la taille du contenu.

Spécification des valeurs minimales et maximales

min-width, max-width, min-height et max-height sont des propriétés CSS utilisées pour définir des contraintes de taille concernant la largeur et la hauteur d'un élément. En les utilisant, vous pouvez vous assurer qu'un élément reste dans une plage de tailles spécifique.

Propriétés `margin` et `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin et padding sont des propriétés utilisées en CSS pour contrôler les espacements externes et internes des éléments dans le modèle de boîte. Elles sont utilisées pour ajuster l'espace entre les éléments et améliorer leur apparence.

Dans la classe margin-padding, les propriétés margin et padding sont toutes deux spécifiées. Il y a un espace margin à l'extérieur de la bordure solide et un espace padding à l'intérieur de la bordure solide.
Dans la classe margin-only, seule la propriété margin est spécifiée. Vous pouvez constater que la zone bleue est plus petite par rapport à la classe margin-padding, car il n'y a pas d'espace padding à l'intérieur de la bordure solide.
Dans la classe no-margin, les propriétés margin et padding sont toutes deux définies à 0. Vous pouvez constater que la zone bleue est collée complètement à gauche car il n'y a pas d'espace margin à l'extérieur de la bordure solide.

De cette façon, la propriété margin définit l'espace externe d'un élément, ajustant la distance entre les éléments. D'autre part, la propriété padding définit l'espace interne d'un élément, ajustant la distance entre le contenu et la bordure.

Propriété `margin`

La propriété margin définit l'espace externe (marge) d'un élément. Elle est utilisée pour créer de l'espace entre des éléments adjacents. Les valeurs suivantes peuvent être spécifiées :.
Valeurs fixes : Vous pouvez spécifier la taille de la marge en pixels, en unités relatives (em, rem) ou en pourcentage.(ex: 10px, 1em, 5%)
auto : Utile pour centrer des éléments de type bloc. Lorsque la largeur est spécifiée, les marges gauche et droite sont ajustées automatiquement.
Valeurs positives et négatives : Les valeurs positives augmentent l'espace, tandis que les valeurs négatives rapprochent les éléments.

Notation abrégée :

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

La propriété margin peut prendre de une à quatre valeurs.

Une valeur : S'applique à tous les côtés.
Deux valeurs : La première s'applique en haut et en bas, la seconde à gauche et à droite.
Trois valeurs : S'applique dans l'ordre suivant : haut, gauche et droite, bas.
Quatre valeurs : S'appliquent dans l'ordre haut, droite, bas, gauche.

Propriété `padding`

Fonction :

La propriété padding définit l'espace intérieur (padding) d'un élément. Elle est utilisée pour créer un espace entre le contenu et la bordure d'un élément. Les valeurs suivantes peuvent être spécifiées :.
Valeurs fixes : Spécifie la taille du padding.(ex: 10px, 1em, 5%)
Les valeurs négatives ne peuvent pas être utilisées. Les valeurs de padding ne peuvent être spécifiées que comme des nombres positifs.

Notation abrégée :

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Comme pour le margin, vous pouvez spécifier de une à quatre valeurs.

Une valeur : S'applique à tous les côtés.
Deux valeurs : La première s'applique en haut et en bas, la seconde à gauche et à droite.
Trois valeurs : S'applique dans l'ordre suivant : haut, gauche et droite, bas.
Quatre valeurs : S'appliquent dans l'ordre haut, droite, bas, gauche.

Propriété `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

La propriété box-sizing est une propriété CSS qui contrôle comment la largeur et la hauteur d'un élément sont calculées.

Dans la classe content-box, la largeur de l'élément est de 360px. La width est de 300px, avec un padding gauche et droit totalisant 40px et une border gauche et droite totalisant 20px, soit un total de 360px.
Dans le border-box, la largeur de l'élément est de 300px. Le padding et la border sont inclus dans la width spécifiée.

Valeurs de `box-sizing`

Il existe principalement deux valeurs pour box-sizing : content-box et border-box, content-box étant la valeur par défaut.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Lorsque content-box est spécifié, seule la largeur et la hauteur du contenu sont définies par width et height. Le padding et la border y sont ajoutés pour déterminer la taille finale. En d'autres termes, width et height font uniquement référence à la zone du contenu.

Dans cet exemple, la width spécifiée est de 200px, mais avec les largeurs de padding et de border gauche et droite ajoutées, la largeur réelle finale de l'élément est de 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Lorsque border-box est spécifié, width et height sont calculés en incluant le padding et la border. En d'autres termes, la width et la height spécifiées deviennent la taille totale du contenu, du padding et de la border.

Dans ce cas, la width spécifiée est de 200px, et comme les padding et border sont également inclus, la largeur réelle finale de l'élément reste de 200px. Les padding et border sont ajustés à l'intérieur de celui-ci.

Résumé des différences de `box-sizing`

Propriété	Méthode de Calcul	Calcul de la Largeur Réelle
`content-box` (par défaut)	`width` fait référence uniquement au contenu. `padding` et `border` sont ajoutés.	`width` + `padding` + `border`
`border-box`	`width` inclut tout (contenu, `padding`, `border`)	La `width` spécifiée est utilisée telle quelle.

Avantages de `box-sizing`

L'utilisation de border-box stabilise la mise en page. Ajouter du padding ou une border ne modifie pas la taille spécifiée, ce qui simplifie les calculs.
Il est utile lorsque l'on crée des mises en page flexibles. Dans les conceptions adaptatives ou les mises en page complexes, border-box est souvent utilisé pour éviter des variations inattendues de taille.

Comment appliquer `border-box` globalement

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

En configurant la CSS de cette manière, vous pouvez appliquer border-box à tous les éléments pour éviter des changements de taille inattendus.

Résumé

box-sizing détermine si les padding et border sont inclus dans la width et la height d'un élément.
Utiliser border-box simplifie les calculs de taille et convient aux conceptions adaptatives.

Propriété `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

La propriété visibility est utilisée pour afficher ou masquer des éléments, mais contrairement à la propriété display, elle influence la mise en page même si l'élément est masqué. Elle masque uniquement l'élément, conservant sa position et sa taille d'origine sans affecter la mise en page des autres éléments.

Syntaxe de base

1element {
2    visibility: value;
3}

value : Une valeur qui spécifie la visibilité de l'élément.

Types de valeurs

La propriété visibility peut être définie avec les valeurs suivantes :.

`visible`

Spécifier visible affichera l'élément. C'est la valeur par défaut.

`hidden`

Spécifier hidden masquera l'élément mais son espace dans la mise en page sera réservé.

`collapse`

collapse est principalement utilisé pour les lignes ou colonnes de tableaux. L'élément devient invisible et son espace est également ignoré. Lorsqu'il est appliqué aux lignes ou colonnes de tableaux, les lignes ou colonnes masquées sont complètement supprimées de la mise en page.
Cependant, lorsqu'il est utilisé sur des éléments blocs ou en ligne réguliers, sauf pour les éléments de tableaux, il se comporte comme hidden et l'espace dans la mise en page est conservé.

`inherit`

Spécifier inherit héritera de la valeur de la propriété visibility depuis l'élément parent.

Différences entre `visibility` et `display`.

Il existe les différences suivantes entre visibility et display.

visibility: hidden masque l'élément mais conserve son espace et sa mise en page.
display: none supprime complètement l'élément de la mise en page, permettant à d'autres éléments de remplir cet espace.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS pour l'affichage de code et les citations Propriétés CSS liées à l'arrière-plan

Propriétés CSS liées au modèle de boîte

YouTube Video

HTML pour l'aperçu

En rapport avec le modèle de boîte

Propriétés width et height

Valeurs pouvant être spécifiées

Spécification des valeurs minimales et maximales

Propriétés margin et padding

Propriété margin

Notation abrégée :

Propriété padding

Fonction :

Notation abrégée :

Propriété box-sizing

Valeurs de box-sizing

content-box

border-box

Résumé des différences de box-sizing

Avantages de box-sizing

Comment appliquer border-box globalement

Résumé

Propriété visibility

Syntaxe de base

Types de valeurs

visible

hidden

collapse

inherit

Différences entre visibility et display.

YouTube Video

Propriétés `width` et `height`

Propriétés `margin` et `padding`

Propriété `margin`

Propriété `padding`

Propriété `box-sizing`

Valeurs de `box-sizing`

`content-box`

`border-box`

Résumé des différences de `box-sizing`

Avantages de `box-sizing`

Comment appliquer `border-box` globalement

Propriété `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Différences entre `visibility` et `display`.