Donc hauteur. CSS - Hauteur du bloc par rapport à sa largeur. Caractéristiques du calcul de la largeur et de la hauteur
le la taille La propriété CSS spécifie la hauteur d'un élément. Par défaut, la propriété définit la hauteur de la zone de contenu . Si box-sizing est défini sur border-box , cependant, il détermine à la place la hauteur de la zone de bordure .
La source de cet exemple interactif est stockée dans un référentiel GitHub. Si vous souhaitez contribuer au projet d'exemples interactifs, veuillez cloner https://github.com/mdn/interactive-examples et envoyez-nous une pull request.
Les propriétés min-height et max-height remplacent height .
Syntaxe
/* Valeur du mot-clé */ hauteur : auto ; /*valeurs
Le type de données CSS représente une valeur de distance. Les longueurs peuvent être utilisées dans de nombreuses propriétés CSS, telles que width, height, margin, padding, border-width, font-size et text-shadow.">Syntaxe formelle
Exemple
HTML
CSS
div ( largeur : 250 px ; marge inférieure : 5 px ; bordure : 2 px bleu uni ; ) #taller ( hauteur : 50 px ; ) #shorter ( hauteur : 25 px ; ) #parent ( hauteur : 100 px ; ) #child ( hauteur : 50 % ;largeur : 75 % ; )résultat
Problèmes d'accessibilité
Assurez-vous que les éléments définis avec une hauteur ne sont pas tronqués et/ou ne masquent pas d'autres contenus lorsque la page est agrandie pour augmenter la taille du texte.
Caractéristiques
| spécification | Statut | Commenter |
|---|---|---|
| Module de dimensionnement CSS intrinsèque et extrinsèque niveau 4 |
Brouillon de l'éditeur | |
| Module de dimensionnement CSS intrinsèque et extrinsèque niveau 3 La définition de "hauteur" dans cette spécification. |
Document de travail | Ajout des mots-clés max-content , min-content , fit-content . |
| Transitions CSS La définition de "hauteur" dans cette spécification. |
Document de travail | Répertorie la hauteur comme pouvant être animée. |
| CSS Niveau 2 (Révision 1) La définition de "hauteur" dans cette spécification. |
Recommandation | Ajoute la prise en charge du type de données CSS représentant une valeur de distance. Les longueurs peuvent être utilisées dans de nombreuses propriétés CSS, telles que width, height, margin, padding, border-width, font-size et text-shadow."> |
| CSS niveau 1 La définition de "hauteur" dans cette spécification. |
Recommandation | définition initiale. |
| valeur initiale | auto |
|---|---|
| S'applique à | tous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableau et les groupes de colonnes |
| Hérité | non |
| Pourcentages | Le pourcentage est calculé par rapport à la hauteur du bloc contenant la boîte générée. Si la hauteur du bloc contenant n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu) et que cet élément n'est pas positionné de manière absolue, la valeur calcule à auto. Un pourcentage de hauteur sur l'élément racine est relatif au bloc contenant initial. |
| Médias | visuel |
| Valeur calculée | un pourcentage ou auto ou la longueur absolue |
| Type d'animation | un type de données CSS sont interpolés sous forme de nombres réels à virgule flottante.">length , les types de données CSS sont interpolés sous forme de nombres réels à virgule flottante.">percentage ou calc(); |
| ordre canonique | l'ordre unique non ambigu défini par la grammaire formelle |
Compatibilité du navigateur
Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter https://github.com/mdn/browser-compat-data et envoyez-nous une demande d'extraction.
Mettre à jour les données de compatibilité sur GitHub
| Bureau | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | bord | Firefox | Internet Explorer | Opéra | safari | vue Web Android | Chrome pour Androïd | Firefox pour Androïd | Opéra pour Android | Safari sur iOS | Internet Samsung | |
| la taille | Prise en charge complète de Chrome 1 | Bord Prise en charge complète 12 | Prise en charge complète de Firefox 1 | Prise en charge complète d'IE 4 | Prise en charge complète d'Opera 7 | Prise en charge complète de Safari 1 | Prise en charge complète de WebView Android 1 | Prise en charge complète de Chrome Android 18 | Prise en charge complète de Firefox Android 4 | Prise en charge complète d'Opera Android 10.1 | Prise en charge complète de Safari iOS 1 | Prise en charge complète de Samsung Internet Android 1.0 |
| adapter le contenu | Prise en charge complète de Chrome 46 | Bord Non pris en charge Non | Firefox Non pris en charge Non | IE Pas de support Non | Opéra Prise en charge complète 33 | Safari Prise en charge complète 11 Prise en charge complète 11 Prise en charge complète 9 Préfixé Préfixé | Opéra Android ? | Safari iOS Prise en charge complète 11 Prise en charge complète 11 Prise en charge complète 9 Préfixé Préfixé Implémenté avec le préfixe du fournisseur : -webkit- | ||||
| contenu maximal | Prise en charge complète de Chrome 46 | Bord Non pris en charge Non | Préfixé Préfixé | IE Pas de support Non | Opéra Prise en charge complète 44 | Prise en charge complète de Safari 11 | WebView Prise en charge complète d'Android 46 | Prise en charge complète de Chrome Android 46 | Préfixé Préfixé Implémenté avec le préfixe du fournisseur : -moz- | Samsung Internet Android Prise en charge complète 5.0 | ||
| contenu minimal | Prise en charge complète de Chrome 46 | Bord Non pris en charge Non | Firefox Prise en charge complète 66 Prise en charge complète 66 Prise en charge complète 3 Préfixé Préfixé Implémenté avec le préfixe du fournisseur : -moz- | IE Pas de support Non | Opéra Prise en charge complète 44 | Prise en charge complète de Safari 11 | WebView Prise en charge complète d'Android 46 | Prise en charge complète de Chrome Android 46 | Firefox Android Prise en charge complète 66 Prise en charge complète 66 Prise en charge complète 4 Préfixé Préfixé Implémenté avec le préfixe du fournisseur : -moz- | Opéra Android Prise en charge complète 43 | Prise en charge complète de Safari iOS 11 | Samsung Internet Android Prise en charge complète 5.0 |
| s'étirer | Prise en charge complète de Chrome 28 webkit-fill-disponible">Autre nom Prise en charge complète 28webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom | Bord Non pris en charge Non | Firefox Non pris en charge Non | IE Pas de support Non | Prise en charge complète d'Opera 15 webkit-fill-disponible">Autre nom Prise en charge complète 15webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom Utilise le nom non standard : -webkit-fill-available | Prise en charge complète de Safari 9 webkit-fill-disponible">Autre nom Prise en charge complète 9webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom Utilise le nom non standard : -webkit-fill-available | Prise en charge complète de WebView Android 4.4 webkit-fill-disponible">Autre nom Prise en charge complète 4.4webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom Utilise le nom non standard : -webkit-fill-available | Prise en charge complète de Chrome Android 28 webkit-fill-disponible">Autre nom Prise en charge complète 28webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom Utilise le nom non standard : -webkit-fill-available | FirefoxAndroid | Opéra Android ? | Prise en charge complète de Safari iOS 9 webkit-fill-disponible">Autre nom Prise en charge complète 9webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom Utilise le nom non standard : -webkit-fill-available | Samsung Internet Android Prise en charge complète 5.0 webkit-fill-disponible">Autre nom Prise en charge complète 5.0webkit-fill-disponible">Autre nom webkit-fill-disponible">Autre nom Utilise le nom non standard : -webkit-fill-available |
Légende
Plein soutien Plein soutien pas de support pas de support Compatibilité inconnue Compatibilité inconnue Utilise un nom non standard. Utilise un nom non standard. Nécessite un préfixe de fournisseur ou un nom différent pour être utilisé. Nécessite un préfixe de fournisseur ou un nom différent pour être utilisé.La propriété css width est responsable de la valeur de la largeur de la zone avec le contenu de l'élément.
Largeur : valeur | intérêt | automatique | hériter
La propriété css height est responsable de la valeur de hauteur de la zone de contenu de l'élément.
Hauteur : valeur | intérêt | automatique | hériter
Les valeurs négatives de hauteur et de largeur ne sont pas autorisées.
Il semblerait que tout soit simple et clair avec ces propriétés CSS, mais, en fait, tout s'avère pas si simple.
Définir une largeur de 500 px pour un élément d'une page Web ne signifie pas que la largeur totale de cet élément sera de 500 px ou plus.
La chose la plus importante à comprendre est que les propriétés width et height définissent la largeur et la hauteur de la zone de contenu.
Les propriétés width et height ne sont que l'un des composants à partir desquels la largeur et la hauteur totales de l'élément seront calculées. Ils spécifient la largeur et la hauteur de la zone de contenu, qui peuvent être vues dans l'image suivante. Également dans la formation de la largeur et de la hauteur globales, des propriétés telles que le rembourrage, la marge et la bordure sont impliquées.
Cela peut être facilement vérifié maintenant.
Prenons, par exemple, deux blocs de même largeur, mais l'un d'eux définira en plus la propriété padding.
Par défaut, les pages Web ont le comportement selon lequel le rembourrage pour le côté correspondant est ajouté aux valeurs de hauteur et de largeur.
Celles. la largeur totale de l'élément sera composée de la valeur de la propriété width de l'élément plus les valeurs padding-left et padding-right.
Pour les différents types d'éléments qui peuvent être trouvés sur la page, la largeur et la hauteur totales des éléments sont calculées à l'aide de formules spéciales.
Pour différents types d'éléments que l'on peut trouver sur les pages Web, les valeurs de largeur et de hauteur peuvent avoir des comportements et des valeurs différents.
Une situation similaire sera avec la propriété hauteur.
CSS a un algorithme spécial qui calcule les valeurs de largeur et de hauteur pour différents éléments sur une page Web. Je ne m'attarderai pas sur cet algorithme maintenant, car c'est un peu compliqué.
Maintenant, la principale chose que nous devons comprendre est que les propriétés width et height nous permettent de travailler avec la largeur et la hauteur de la zone avec le contenu de l'élément, et non avec la largeur et la hauteur globales de l'élément.
Hauteur et largeur de l'élément sont des valeurs calculées. Chaque élément d'une page Web forme une zone rectangulaire, qui à son tour se compose de plusieurs zones − zones de contenu (contenu), zones de rembourrage, zone de cadre et zones de terrainélément.
Entre le contenu de l'élément et sa bordure se trouvent tirets padding , à l'extérieur de la bordure de l'élément - des champs marge . Chaque élément a une zone de contenu, les autres zones sont facultatives.
Riz. 1. Modèle de bloc de l'élément 1. Hauteur de l'élément
La propriété height définit la hauteur du contenu de l'élément block et n'a aucun effet sur l'affichage des éléments inline : inline; . La hauteur des éléments en ligne est égale à la hauteur de leur contenu. Les valeurs négatives ne sont pas autorisées. La propriété n'est pas héritée.
Syntaxe
P (hauteur : 100px ;)
2. Largeur de l'élément
La propriété width définit la largeur du contenu de l'élément block et n'a aucun effet sur l'affichage des éléments inline : inline; . La largeur des éléments en ligne est égale à la largeur de leur contenu. Les valeurs négatives ne sont pas autorisées. La propriété n'est pas héritée.
Syntaxe
P (largeur : 100px ;)
3. Hauteur et largeur d'un élément en position absolue
Définissez la largeur et la hauteur d'un élément en position absolue position : absolute; pas toujours nécessaire, car dans ce cas, la hauteur et la largeur sont implicitement déterminées par le décalage de l'élément. Si l'élément a une bordure et une marge , elles réduisent la zone de contenu de la quantité appropriée.
Div ( arrière-plan : #6A7690 ; position : absolue ; haut : 0 ; bas : 0 ; gauche : 50 % ; droite : 0 ; ) /*dans ce cas, hauteur de l'élément 100 %, largeur 50 % du bloc parent*/ Riz. 2. Hauteur et largeur d'un élément en position absolue
4. Rembourrage d'élément
À l'aide de la propriété padding, vous pouvez définir le remplissage sur plusieurs côtés d'un élément en même temps, dans l'ordre suivant : . Si l'élément a un arrière-plan, il s'étendra également au rembourrage. Les valeurs négatives ne sont pas autorisées. La propriété n'est pas héritée.
Si trois valeurs sont données, par exemple, div (padding : 10px 20px 30px;) , alors elles seront réparties dans l'ordre suivant : la première valeur est le rembourrage supérieur, la seconde est le rembourrage droit et gauche, la troisième est le rembourrage inférieur.
Si deux valeurs sont données, par exemple, div (padding: 10px 20px;) , alors la première définira le rembourrage supérieur et inférieur, la seconde - la droite et la gauche.
Une valeur, telle que div (padding: 10px;) , définira le même rembourrage pour tous les côtés de l'élément.
Syntaxe
P (remplissage : 5px 10px 15px 10px ;)
4.1. Rembourrage d'un côté d'un élément
Pour définir le remplissage sur un seul côté d'un élément, vous devez utiliser l'une des propriétés padding-top , padding-right , padding-bottom , padding-left , par exemple :
P (remplissage à gauche : 10px ;)
5. Champs d'éléments
La plupart des éléments sont séparés les uns des autres par des champs. La propriété margin est un raccourci pour les marges d'un élément, dans l'ordre suivant : haut, droite, bas, gauche. Il est utilisé lorsque vous devez définir des marges sur plusieurs côtés, mais pas nécessairement sur quatre. Les marges verticalement adjacentes des éléments de niveau bloc s'effondrent et les marges supérieure et inférieure n'ont aucun effet sur les éléments en ligne. Les valeurs négatives sont autorisées. La propriété n'est pas héritée.
Si trois valeurs sont données, par exemple, div (marge : 10px 20px 30px;) , alors elles seront réparties dans l'ordre suivant : la première valeur est la marge supérieure, la seconde les marges droite et gauche, la troisième est la marge inférieure.
Si deux valeurs sont données, par exemple, div (margin: 10px 20px;) , alors la première définira les marges supérieure et inférieure, la seconde définira les marges droite et gauche.
Une valeur unique, telle que div (margin: 10px;) , définira la même marge pour tous les côtés de l'élément.
(margin: 0 auto;) ne fonctionnera que si la largeur de l'élément est définie explicitement.
Riz. 3. marge : automatique ; pour un élément absolument positionné Syntaxe
Div (marge : 5px 10px 2px 5px ;)
5.1. Marges sur un côté d'un élément
Les propriétés margin-top , margin-right , margin-bottom , margin-left contrôlent les marges respectives de chaque côté d'un élément, par exemple :
P (marge gauche : 10 px ;)
6. Restriction de largeur et de hauteur
CSS prend également en charge quelques propriétés supplémentaires liées à la définition de la hauteur et de la largeur des éléments de la page Web : min-height , min-width , max-height et max-width . Ces propriétés vous permettent de définir les valeurs minimales et maximales pour la largeur ou la hauteur d'un élément, donnant à l'élément une chance de remplir l'espace disponible. Les propriétés sont souvent utilisées pour la conception de pages Web réactives. S'applique à tous les éléments à l'exception des éléments inline et table. Arrivez toujours après la règle principale, c'est-à-dire après avoir défini la hauteur ou la largeur de l'élément. Non hérité.
Vous pouvez définir des dimensions normales à l'aide d'une unité de mesure et des restrictions de taille à l'aide d'autres unités, par exemple :
Div (largeur : 400 pixels ; largeur maximale : 50 % ; )
L'élément n'aura une largeur de 400px que si cette valeur est inférieure à 50% de la largeur du bloc conteneur, sinon sa largeur sera réduite.
Dernière mise à jour : 21/04/2016
Les dimensions des éléments sont définies à l'aide des propriétés width (width) et height (height).
La valeur par défaut de ces propriétés est auto , ce qui signifie que le navigateur détermine la largeur et la hauteur de l'élément. Vous pouvez également définir explicitement les dimensions à l'aide d'unités (pixels, ems) ou de pourcentages :
Largeur : 150 pixels largeur : 75% hauteur : 15em ;
Les pixels définissent la largeur et la hauteur exactes. L'unité em dépend de la hauteur de la police dans l'élément. Si la taille de police d'un élément est, par exemple, de 16 pixels, alors 1 em pour cet élément serait de 16 pixels. Autrement dit, si la largeur de l'élément est définie sur 15em, alors ce sera en fait 15 * 16 = 230 pixels. Si l'élément n'a pas de taille de police définie, elle sera prise à partir des paramètres hérités ou des valeurs par défaut.
Les valeurs en pourcentage de la propriété width sont calculées en fonction de la largeur de l'élément conteneur. Si, par exemple, la largeur de l'élément body d'une page Web est de 1 000 pixels et que l'élément qui y est imbriqué
Les valeurs en pourcentage de la propriété height fonctionnent de la même manière que la propriété width, sauf que maintenant la hauteur est calculée à partir de la hauteur de l'élément conteneur.
Par exemple:
Dans le même temps, les dimensions réelles de l'élément peuvent finir par être différentes de celles définies dans les propriétés width et height. Par exemple:
Comme vous pouvez le voir sur la capture d'écran, en réalité, la valeur de la propriété width - 200px - ne détermine que la largeur du contenu interne de l'élément, et sous le bloc de l'élément lui-même, un espace sera alloué, dont la largeur est égal à la largeur du contenu interne (propriété width) + remplissage (propriété padding) + largeur de la bordure (propriété border-width) + marges (propriété margin). Autrement dit, l'élément aura une largeur de 230 pixels et la largeur du bloc d'éléments, en tenant compte des marges, sera de 250 pixels.
Ces calculs doivent être pris en compte lors de la détermination des dimensions des éléments.
À l'aide d'un ensemble supplémentaire de propriétés, vous pouvez définir les tailles minimale et maximale :
min-width : largeur minimale
max-width : largeur maximale
min-height : hauteur minimale
hauteur-max : hauteur maximale
Dans ce cas, la largeur de l'élément est égale à 50% de la largeur de l'élément conteneur, cependant, elle ne peut pas être inférieure à 200 pixels et supérieure à 300 pixels.
Redéfinition de la largeur de bloc
La propriété box-sizing vous permet de remplacer les tailles définies des éléments. Il peut prendre l'une des valeurs suivantes :
content-box : La valeur par défaut de la propriété, dans laquelle le navigateur ajoute la largeur et le rembourrage de la bordure aux valeurs des propriétés width et height pour déterminer la largeur et la hauteur réelles des éléments
padding-box : indique au navigateur Web que la largeur et la hauteur de l'élément doivent inclure le rembourrage dans sa valeur. Par exemple, disons que nous avons le style suivant :
Largeur : 200 pixels hauteur : 100px ; marge : 10px rembourrage : 10px bordure : 5px solide #ccc ; couleur de fond : #eee ; box-sizing : padding-box ;
Ici, la largeur réelle du contenu interne du bloc sera de 200px (width) - 10px (padding-left) - 10px (padding-right) = 180px.
Il convient de noter que la plupart des navigateurs modernes ne prennent pas en charge cette propriété.
border-box : indique au navigateur Web que la largeur et la hauteur de l'élément doivent inclure le rembourrage et les bordures dans le cadre de sa valeur. Par exemple, disons que nous avons le style suivant :
Largeur : 200 pixels hauteur : 100px ; marge : 10px rembourrage : 10px bordure : 5px solide #ccc ; couleur de fond : #eee ; dimensionnement de la boîte : border-box ;
Ici, la largeur réelle du contenu interne du bloc sera de 200px (width) - 10px (padding-left) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170px.
Par exemple, définissons deux boîtes qui ne diffèrent que par la valeur de la propriété box-sizing :
Dans le premier cas, lors de la détermination de la taille du bloc, les propriétés de largeur et de hauteur seront ajoutées à l'épaisseur de la bordure, ainsi que le rembourrage et le rembourrage, de sorte que le premier bloc sera grand.