Comment régler la largeur et la hauteur de la portée dans CSS

Dans HTML, Span est un conteneur en ligne utilisé pour le contenu de texture et les styler. Mais vous ne pouvez pas définir la largeur et la hauteur de la portée comme normalement définie pour les autres éléments HTML. Dans un tel scénario, utilisez le «afficher«Propriété de CSS, puis définissez la largeur et la hauteur de la durée en fonction de vos exigences.

Dans ce manuel, nous discuterons de la façon d'ajuster la hauteur et la largeur d'une durée dans CSS.

Quelle est la propriété «affichage» dans CSS?

Le "afficher»La propriété est utilisée pour définir le comportement d'affichage de l'élément HTML. Cette propriété CSS peut être utilisée pour spécifier si un élément doit être traité comme en ligne ou en bloc ou pour définir la disposition de ses enfants. Pour être plus précis, vous pouvez l'utiliser pour ajuster la largeur et la hauteur de la portée dans CSS.

Syntaxe

La syntaxe de la propriété d'affichage est:

Affichage: bloc | bloc en ligne

Voici la description des valeurs ci-dessus:

• bloc: Il est utilisé pour définir la largeur et la hauteur de l'élément.
• Block en ligne: Il est utilisé pour définir les marges et le rembourrage de l'élément.

Maintenant, passez aux exemples dans lesquels nous allons définir la largeur et la hauteur de la portée à l'aide du bloc et des valeurs de blocage en ligne de la propriété d'affichage.

Exemple 1: Réglage de la largeur et de la hauteur de la portée à l'aide de «bloc»

Pour définir la largeur et la hauteur de la portée, créez d'abord une portée en HTML à l'aide de la balise:

Html

Largeur et hauteur de la portée

Dans CSS, définissez la largeur et la hauteur de la travée à l'aide du «afficher" propriété. Pour ce faire, utilisez le «portée«Pour y accéder. Après cela, définissez la valeur de la propriété d'affichage comme «bloc»Et sa largeur et sa hauteur comme«400px" et "150px". De plus, définissez la couleur d'arrière-plan de la travée comme «RVB (11, 235, 243)»Et la frontière de la travée comme«5px" largeur, "solide«Forme, et«RVB (47, 0, 255)" couleur.

CSS

portée
bloc de visualisation;
Largeur: 400px;
hauteur: 150px;
Contexte: RVB (11, 235, 243);
Border: 5px RVB solide (47, 0, 255);

Comme vous pouvez le voir, nous avons réussi à définir la largeur et la hauteur de la travée dans CSS:

Passons à l'exemple suivant

Exemple 2: Réglage de la largeur et de la hauteur de la portée à l'aide de «Block en ligne»

Dans cet exemple, nous utiliserons le «bloc en ligne”Valeur de la propriété d'affichage pour ajuster la hauteur et la largeur de la portée.

À cette fin, nous créerons une portée dans le HTML comme l'exemple précédent, puis passerons au CSS et définir la valeur de la propriété d'affichage comme «bloc en ligne»Et définissez la largeur et la hauteur de la travée comme«400px" et "150px". De plus, définissez la couleur d'arrière-plan de la travée comme «RVB (209, 173, 95)»Et la frontière de la travée comme«5px","solide", et "RVB (255, 166, 0)»:

portée
Affichage: bloc en ligne;
Largeur: 400px;
hauteur: 150px;
Contexte: RVB (209, 173, 95);
Border: 5px RVB solide (255, 166, 0);

Cela nous donnera le résultat suivant:

D'après les exemples donnés, on peut observer que l'utilisation du «bloc" et "bloc en ligne«Valeurs de la propriété d'affichage, les propriétés de hauteur et de largeur de CSS peuvent être ajustées.

Conclusion

En utilisant la propriété Display's «bloc" et "bloc en ligne»Valeurs, la hauteur et la largeur de la portée peuvent être ajustées. Vous pouvez utiliser l'un d'eux en fonction de votre choix; Les deux donnent le même résultat. Dans ce manuel, nous avons expliqué la procédure liée à la définition de la largeur et de la hauteur de la portée à l'aide de la propriété d'affichage CSS.