Wie man Breite und Spannweite in CSS einstellt

In HTML ist Span ein Inline -Container, der für Texturinhalte verwendet wird und sie stylen. Sie können jedoch nicht die Breite und Höhe der Spannweite einstellen, die normalerweise für die anderen HTML -Elemente eingestellt ist. Verwenden Sie in einem solchen Szenario die “AnzeigeEigenschaft von CSS und dann die Breite und Höhe der Spannweite gemäß Ihren Anforderungen festlegen.

In diesem Handbuch werden wir diskutieren, wie die Höhe und Breite einer Spannweite in CSS angepasst werden kann.

Was ist die Eigenschaft "Anzeige" in CSS?

Der "AnzeigeDie Eigenschaft wird verwendet, um das Anzeigeverhalten des HTML -Elements festzulegen. Diese CSS -Eigenschaft kann verwendet werden, um anzugeben, ob ein Element als Inline oder Block behandelt werden soll oder um das Layout seiner Kinder festzulegen. Um genauer zu sein, können Sie es verwenden, um die Breite und Höhe der Spannweite in CSS anzupassen.

Syntax

Die Syntax der Anzeigeeigenschaft lautet:

Anzeige: Block | Inline-Block

Hier ist die Beschreibung der oben gegebenen Werte:

• Block: Es wird verwendet, um die Breite und Höhe des Elements einzustellen.
• Inline-Block: Es wird verwendet, um die Ränder und die Polsterung des Elements einzustellen.

Gehen Sie nun zu den Beispielen, in denen wir die Breite und Höhe der Spannweite mit dem Block- und Inline-Block-Werten der Anzeigeeigenschaft festlegen werden.

Beispiel 1: Einstellung der Breite und Höhe der Spannweite mit "Block"

Um die Breite und Höhe der Spannweite festzulegen, erstellen Sie zunächst eine Spannweite in HTML mit dem Tag:

Html

Breite und Höhe der Spannweite

Setzen Sie in CSS die Breite und Höhe der Spannweite mit dem “Anzeige" Eigentum. Verwenden Sie dazu die “Spanne”Um darauf zuzugreifen. Setzen Sie danach den Wert der Anzeigeeigenschaft als “Block"Und seine Breite und Höhe als" als "400px" Und "150px”. Setzen Sie außerdem die Hintergrundfarbe der Spannweite als “RGB (11, 235, 243)"Und der Grenze der Spannweite als"5px" Breite, "solideForm und “RGB (47, 0, 255)" Farbe.

CSS

Spanne
Bildschirmsperre;
Breite: 400px;
Höhe: 150px;
Hintergrund: RGB (11, 235, 243);
Rand: 5px Solid RGB (47, 0, 255);

Wie Sie sehen können, haben wir die Breite und Höhe der Spannweite in CSS erfolgreich eingestellt:

Wechseln wir zum nächsten Beispiel

Beispiel 2: Einstellung der Breite und Höhe der Spannweite mit "Inline-Block"

In diesem Beispiel werden wir die „verwenden“Inline-Block”Wert der Anzeigeeigenschaft, um die Höhe und Breite der Spannweite anzupassen.

Zu diesem Zweck erstellen wir eine Spannweite im HTML wie im vorherigen Beispiel und wechseln dann zum CSS und setzen den Wert der Anzeigeeigenschaft als "festInline-Block"Und setzen Sie die Breite und Höhe der Spannweite als" als "400px" Und "150px”. Setzen Sie außerdem die Hintergrundfarbe der Spannweite als “RGB (209, 173, 95)"Und der Grenze der Spannweite als"5px","solide", Und "RGB (255, 166, 0)”:

Spanne
Anzeige: Inline-Block;
Breite: 400px;
Höhe: 150px;
Hintergrund: RGB (209, 173, 95);
Grenze: 5PX Solid RGB (255, 166, 0);

Dies gibt uns das folgende Ergebnis:

Aus den oben genannten Beispielen kann beobachtet werden, dass die Verwendung der “verwendet wirdBlock" Und "Inline-Block”Werte der Anzeigeeigenschaft, die Höhe und Breite von CSS können eingestellt werden.

Abschluss

Mithilfe der Anzeigeeigenschaft "Block" Und "Inline-BlockWerte, Höhe und Breite der Spannweite können eingestellt werden. Sie können einen von ihnen nach Ihrer Wahl verwenden. Beide geben das gleiche Ergebnis. In diesem Handbuch haben wir den Verfahren zum Einstellen der Breite und Höhe der Spannweite mithilfe der CSS -Anzeigeeigenschaft erläutert.