La propriété de largeur dans CSS a expliqué

La propriété de largeur ajuste la largeur d'un élément en s'étendant dans la direction horizontale (à l'intérieur du rembourrage). La propriété de largeur est liée au rembourrage, à la bordure et à la marge, mais elle ne les affecte ni ne les modifie. Les éléments de bloc obtiennent la largeur en fonction de la largeur de la page; Cependant, la propriété de largeur vous permet d'ajuster la largeur selon l'exigence.

Ce guide descriptif fournit le fonctionnement et l'utilisation de la propriété de largeur dans CSS. Le fonctionnement de la propriété de largeur est guidé par la syntaxe utilisée et plusieurs exemples sont cités pour illustrer l'utilisation de la propriété de largeur.

Comment fonctionne la propriété de largeur dans CSS

La largeur d'un élément peut être définie en utilisant la syntaxe écrite ci-dessous.

sélecteur largeur: valeur;

Le sélecteur peut être n'importe quel élément ou peut se référer à la classe CSS dans la feuille de style. La valeur de la largeur peut être définie dans diverses unités de mesure indiquées ci-dessous:

• Longueur: la valeur est définie en px, EM. La valeur d'EM varie en fonction de l'ensemble de taille par défaut pour l'élément parent. Par exemple, si la taille par défaut est définie sur 15px, elle serait comptée comme 1EM et en gardant la valeur par défaut à 15px, la valeur de taille 2EM serait équivalente à 30px.
• Auto: les navigateurs ajustent automatiquement la valeur
• pourcentage (%): la valeur (en%) s'associe à la largeur de l'élément parent. Par exemple, la valeur de 50% ajusterait la largeur à 50% (de l'élément parent ou dans lequel l'élément ciblé est contenu).
• Héritage: la valeur de la largeur de l'élément parent est récupérée
• Initial: la valeur de largeur par défaut est utilisée

Le fonctionnement de la propriété de largeur dans CSS dépend majoritairement de l'unité de mesure utilisée.

Comment utiliser la propriété de largeur dans CSS

Cette section fournit plusieurs exemples qui démontrent la fonctionnalité de la propriété de largeur dans CSS.

Exemple 1: Utilisation de la propriété de largeur avec longueur / pourcentage

Cet exemple explique l'utilisation de la propriété de largeur avec diverses mesures de longueur et de pourcentage. Le code présenté ci-dessous fait référence à cet exemple:

Ajustement de la largeur

Largeur en px

Largeur dans EM

Largeur en%

La description du code est fournie ci-dessous:

• Trois classes CSS sont créées nommées «PX», «EM» et «Per»
• Le «PX», «EM» et «PER» utilise respectivement PX, EM et% pour la mesure de la largeur
• Ces trois classes sont utilisées dans trois paragraphes pour démontrer leur utilisation

L'image du code est fournie ci-dessous

Sortir:

Exemple 2: Utilisation de la largeur avec les valeurs initiales, héritantes et auto

Les valeurs initiales, héritées et auto sont utilisées dans cet exemple pour modifier la largeur de l'élément. Pour ce faire, le code suivant est exercé:

Réglage de la largeur avec des valeurs auto / initiales / hérit

largeur initiale

largeur héritée

largeur automatique

Le code est décrit comme

• Trois classes CSS sont faites nommées «Initial», «Héritage» et «Auto»
• Ces classes sont utilisées dans trois paragraphes représentant les valeurs «initiales», «hériter» et «auto» de largeur
• Un div est stylé avec 50% de largeur et le couleur d'arrière-plan qui serait utilisé comme parent d'un paragraphe (qui est utilisé avec la classe CSS héritée)

L'image du code est illustrée ci-dessous

Sortir:

À partir de la sortie, il est observé que la largeur du deuxième paragraphe est héritée de la div (dont la largeur est de 50%) et donc le paragraphe serait limité au 50% de son élément parent (div).

Exemple 3: Utilisation de la largeur avec une largeur maximale et une largeur min

La largeur maximale et la largeur min définissent respectivement la limite supérieure et inférieure de la largeur. Si la propriété de largeur est utilisée avec la largeur de la largeur min / largeur maximale, il y a des chances que le résultat ne soit pas la même chose que par votre exigence. La valeur de la largeur doit être compromise dans l'une des conditions suivantes:

• Si la largeur < max-width then value of max-width will be used and
• Si la largeur < min-width then the width would be set according to the min-width value

Passons-le en utilisant le code écrit ci-dessous.

En utilisant la largeur avec la largeur min et la largeur maximale

largeur avec largeur min

largeur avec largeur maximale

La description du code est fournie ci-dessous

• Deux classe CSS sont créées nommées «Min» et «Max» qui utilisent la largeur avec la largeur min et la largeur avec une largeur maximale
• Les valeurs de largeur dans les classes «min» et «max» sont respectivement de 25% et 75% tandis que la largeur min est de 75% et la largeur maximale est de 50%
• Ces classes CSS sont utilisées dans deux paragraphes

L'image de l'éditeur de code est indiquée ci-dessous:

Sortir:

À partir de la sortie ci-dessus, la largeur est influencée par la largeur min et la largeur maximale. Par conséquent, il est suggéré que la largeur doit être utilisée séparément, sinon la propriété peut entraîner une sortie étrange.

Conclusion

La propriété de largeur dans CSS est utilisée pour ajuster la largeur (longueur horizontale) de l'élément. Il établit une connexion avec le rembourrage, la bordure et les marges d'un élément. Cependant, ni la largeur ni le rembourrage / marge / bordure. Cet article fournit le travail et l'utilisation de la propriété de largeur dans CSS. La propriété de largeur peut être influencée par la propriété max-hauteur et la propriété de hauteur minimale de CSS. Il est donc recommandé d'utiliser la propriété de largeur en gardant la largeur maximale et la largeur min. De plus, nous avons démontré des exemples qui utilisent la largeur et la propriété max / largeur min dans CSS.