Jak ustawić szerokość i wysokość rozpiętości w CSS

W HTML Span jest wbudowanym pojemnikiem używanym do zawartości tekstury i ich stylizacji. Ale nie można ustawić szerokości i wysokości rozpiętości, jak zwykle ustawione dla innych elementów HTML. W takim scenariuszu użyj „wyświetlacz„Własność CSS, a następnie ustaw szerokość i wysokość rozpiętości zgodnie z Twoimi wymaganiami.

W tym podręczniku omówimy, jak dostosować wysokość i szerokość rozpiętości w CSS.

Czym jest właściwość „wyświetlania” w CSS?

„„wyświetlacz”Właściwość służy do ustawienia zachowania wyświetlania elementu HTML. Niniejszą właściwość CSS można wykorzystać do określenia, czy element powinien być traktowany jako wbudowany czy blok. Aby być bardziej szczegółowym, możesz go wykorzystać do dostosowania szerokości i wysokości rozpiętości w CSS.

Składnia

Składnia właściwości wyświetlacza to:

Wyświetlacz: blok | Block Inline

Oto opis powyższych wartości:

• blok: Służy do ustawienia szerokości i wysokości elementu.
• Block Inline: Służy do ustawiania marginesów i wyściółki elementu.

Teraz przejdź do przykładów, w których ustawimy szerokość i wysokość rozpiętości za pomocą wartości bloków i bloków wbudowanych właściwości wyświetlania.

Przykład 1: Szerokość i wysokość rozpiętości za pomocą „bloku”

Aby ustawić szerokość i wysokość rozpiętości, najpierw utwórz rozpiętość w HTML za pomocą znacznika:

Html

Szerokość i wysokość rozpiętości

W CSS ustaw szerokość i wysokość rozpiętości za pomocą „wyświetlacz" nieruchomość. Aby to zrobić, użyj „Zakres„Aby uzyskać do niego dostęp. Następnie ustaw wartość właściwości wyświetlania jako „blok”Oraz jego szerokość i wysokość jako„400px" I "150px". Ponadto ustaw kolor tła rozpiętości jako „RGB (11, 235, 243)”I granica rozpiętości jako„5px" szerokość, "solidny”Kształt i„RGB (47, 0, 255)" kolor.

CSS

Zakres
Blok wyświetlacza;
szerokość: 400px;
Wysokość: 150px;
Tło: RGB (11, 235, 243);
granica: 5px stały RGB (47, 0, 255);

Jak widać, z powodzeniem ustawiliśmy szerokość i wysokość rozpiętości w CSS:

Przejdźmy do następnego przykładu

Przykład 2: Szerokość ustawienia i wysokość rozpiętości przy użyciu „Block Inline”

W tym przykładzie użyjemy „Block wbudowany„Wartość właściwości wyświetlacza w celu dostosowania wysokości i szerokości rozpiętości.

W tym celu utworzymy rozpiętość w HTML tak samo jak w poprzednim przykładzie, a następnie przejdziemy do CSS i ustaw wartość właściwości wyświetlania jako „Block wbudowany”I ustaw szerokość i wysokość rozpiętości jako„400px" I "150px". Ponadto ustaw kolor tła rozpiętości jako „RGB (209, 173, 95)”I granica rozpiętości jako„5px”,„solidny", I "RGB (255, 166, 0)”:

Zakres
Wyświetlacz: Block Inline;
szerokość: 400px;
Wysokość: 150px;
Tło: RGB (209, 173, 95);
granica: 5px Solid RGB (255, 166, 0);

To da nam następujący wynik:

Z powyższych przykładów można zaobserwować, że użycie „blok" I "Block wbudowany”Wartości właściwości wyświetlania, właściwości wysokości i szerokości CSS można dostosować.

Wniosek

Korzystając z właściwości wyświetlacza „blok" I "Block wbudowany”Wartości, wysokość i szerokość rozpiętości można dostosować. Możesz użyć jednego z nich zgodnie z wyborem; Oba dają ten sam wynik. W tym podręczniku wyjaśniliśmy procedurę związaną z ustawianiem szerokości i wysokości rozpiętości za pomocą właściwości wyświetlania CSS.