Arkusz stylów kaskadowych (CSS) zapewnia setki właściwości stylizacji dla elementów HTML. Wraz z stylami dekoracji zapewnia również właściwości w celu dostosowania pozycji i umieszczenia elementów na stronie internetowej. Te właściwości obejmują „platforma”,„wyściółka”,„margines”,„pozycja", i wiele więcej.

Ten post obejmie:

• Jaka jest właściwość „wyściółka” w CSS?
• Jak określić właściwość „wyściółka”?

Jaka jest właściwość „wyściółka” w CSS?

„„wyściółka”Własność opisuje odległość między treścią elementu a jego granicą. Mówiąc dokładniej, ta właściwość dodaje przestrzeń w elemencie, podczas gdy „margines„Właściwość generuje przestrzeń wokół elementu. Wartości właściwości wyściółki można zmierzyć w „px”,„em”,„rem", albo więcej. Jednakże "rem”To najlepsza jednostka do użycia z właściwościami marginesu i wyściółki.

Warunek: Utwórz plik HTML

Aby zastosować właściwość wyściółka na elementach HTML, użytkownicy muszą utworzyć plik HTML. W tym celu skorzystaj z następujących kroków:

• Dodać "”Element i przypisz go klasa„główna zawartość".
• Następnie uwzględnij „„Tag do umieszczenia obrazu i„

  „Tag, który zawiera trochę tekstu:

Światło edukacji sprawia, że ​​jesteśmy jasni.

Przejdźmy do sekcji CSS, aby zastosować styl do kontenera.

Styl „div” element

Najpierw uzyskaj dostęp do elementu „” z klasą „.główna zawartość”I zastosuj następujące właściwości:

.główna zawartość
szerokość: 400px;
Margines: Auto;
granica: 5px rowek RGB (151, 151, 151);

Opis wyżej wymienionych nieruchomości jest następujący:

• "szerokość”Określa szerokość elementu.
• "margines”Definiuje przestrzeń wokół elementu.
• "granica”Stosuje granicę wokół elementu, określając wartości szerokości granicy, stylu i koloru.

Dane wyjściowe powyższego kodu jest przedstawione poniżej:

Jak określić właściwość „wyściółka”?

W CSS „wyściółka„Własność ma zakres od jednego do czterech wartości. Aby lepiej zrozumieć, postępuj zgodnie z wymienionymi przykładami:

• Przykład 1: właściwość „wyściółka” CSS o jednej wartości
• Przykład 2: właściwość „wyściółka” CSS z dwiema wartościami
• Przykład 3: właściwość „wyściółka” CSS z trzema wartościami
• Przykład 4: właściwość „wyściółka” CSS z czterema wartościami

Przykład 1: właściwość „wyściółka” CSS o jednej wartości

W CSS, kiedy „wyściółka„Własność jest przypisana o jedną wartość, dodaje„1rem„Przestrzeń po każdej stronie zawartości elementu:

Wyściółka: 1rem;

Wyjście

Przykład 2: właściwość „wyściółka” CSS z dwiema wartościami

„„wyściółka„Właściwość można dostosować za pomocą dwóch wartości, gdzie:

• „„pierwsza wartość”Reprezentuje wyściółkę (przestrzeń) w górnej i dolnej stronie.
• „„druga wartość”Reprezentuje przestrzeń po lewej i prawej stronie treści elementu:

Wyściółka: 1 REM 2REM;

Wyjście

Przykład 3: właściwość „wyściółka” CSS z trzema wartościami

CSS „wyściółka„Właściwość można dostosować za pomocą trzech wartości. Działają w następujący sposób:

• Pierwsza wartość wskazuje na wyściółkę u góry.
• Druga wartość oznacza wyściółkę po lewej i prawej stronie.
• Trzecia wartość określa wyściółkę u dołu zawartości elementu:

Wyściółka: 1 REM 2 SEM 3 SM;

Wyjście

Przykład 4: właściwość „wyściółka” CSS z czterema wartościami

„„wyściółka„Właściwość z czterema wartościami dostosowuje określoną przestrzeń między treścią a granicą ze wszystkich stron, jak opisano poniżej:

• "Pierwsza wartość”Dodaje wyściółkę u góry.
• "Druga wartość”Dodaje wyściółkę po prawej stronie.
• "Trzecia wartość”Dodaje wyściółkę na dole.
• "Czwarta wartość”Dodaje wyściółkę po lewej stronie:

Wyściółka: 2 Sem 3, 1 Sem 2rem;

Wyjście

Opracowaliśmy w stylach wyściółki HTML o różnych wartościach za pomocą CSS.

Wniosek

CSS „wyściółka„Własność zwiększa odległość wokół treści elementu. Ma zakres wartości od jednego do czterech. "Jedna wartość”Oznacza tę samą wyściółkę po każdej stronie zawartości elementu. "Dwie wartości”Zdefiniuj przestrzeń na szczycie górnego dna i po lewej stronie. "Trzy wartości”Ustaw wyściółkę u góry, lewej i dolnej strony zawartości elementu. "Cztery wartości”Określ unikalne wyściółki z każdej strony. Ten post pokazał styl wyściółki HTML w CSS.