Wyjaśniona nieruchomość w CSS

Wyściółka jest właściwością używaną do tworzenia przestrzeni wokół zawartości elementu (wewnątrz granicy). Element ma cztery strony, a właściwość wyściółka pozwala generować przestrzeń wokół dowolnej określonej strony. Ponadto właściwość wyściółki pozwala jednocześnie tworzyć przestrzeń wokół wielu stron.

Wyściółka i marginesy są zjawiskami powiązanymi, ponieważ obie właściwości mają tendencję do tworzenia przestrzeni wokół elementów. Jednak różnica polega na tym, że wyściółka tworzy przestrzeń wewnątrz granic, a margines składa przestrzeń poza granicą. Ten pouczający post opisuje działanie i wykorzystanie nieruchomości wyściółki w CSS.

Jak działa nieruchomość wyściółka w CSS

Głównym celem nieruchomości wyściółki jest dodanie przestrzeni wokół elementów. Wyściółka może być używana na jeden z następujących sposobów:

Korzystanie z właściwości wyściółki po bokach indywidualnie

Wyściółka można przekazać poszczególnym stronom, wydając następującą składnię:

selektor padding-top: wartość; // w górnej stronie
selektor padding-right: wartość; // po prawej stronie
selektor padding-bottom: wartość; // po dolnej stronie
selektor padding-left: wartość; // po lewej stronie

Instancje powyższej składni opisano poniżej:

• Selektor jest elementem lub może odnosić się do klasy CSS
• Padding-top, prawy wyściółka, wyściółka i wyściółka lewica reprezentuje strony wyściółki
• Wartość określa przestrzeń, która będzie podana, a wartość może mieć jednostkę pomiarową i.mi., długość (PX, CM, REM, EM), %(procent według elementu), automatyczne (zgodnie z definicją przeglądarki).

Notatka: Wartości zmierzone w PX są bezwzględne (stałe), podczas gdy wartości w %, rem i em są używane do reakcji i są dostosowywane automatycznie.

Korzystanie z wyściółki na krótkowzroczność

Własność wyściółki na streszczenie może być używana do dodawania przestrzeni do różnych stron jednocześnie. Poniższa składnia jest praktykowana przy użyciu właściwości wyściółki w CSS.

Selektor padding: wartość1 wartość2 wartość 3;

W powyższej składni wartość1, wartość2, wartość3 i wartość4 reprezentuje górną, prawą, dolną i lewą stronę elementu.

Jak korzystać z nieruchomości wyściółki w CSS

W tej sekcji zawiera różne przykłady, które definiują użycie właściwości wyściółki w CSS.

Przykład 1: Korzystanie z właściwości wyściółki po poszczególnych stronach
Poniższy kod praktykuje właściwość wyściółki po wszystkich stronach indywidualnie.

Własność wyściółka w CSS

Za pomocą wyściółki w PX

Używając w Emi prawej wyściółki

Korzystanie z dna wyściółki w %

Używając lewicy wyściółki w PX

Opis kodu jest podany poniżej

• Szerokość wszystkich akapitów byłaby „dopasowana”, aby lepiej zrozumieć wyściółkę
• Cztery klasy CSS nazwane „top”, „platforma”, „bot” i „lef” odnoszą się do właściwości wyściółki, prawej, wyściółki, wyściółki i wyściółki
• Klasy „TOP” i „LEF” używają „PX” jako jednostki pomiarowej do wyściółki, w której jako klasy „platforma” i „bot” ćwiczą „EM” i „%” jako jednostkę pomiarową do wyściółki
• Cztery akapity korzystają z klas CSS do wdrożenia wyściółki na tych akapitach

Obraz kodu jest pokazany tutaj

Wyjście

Przykład 2: Korzystanie z właściwości wyściółki po wielu stronach jednocześnie
Właściwość wyściółki skrótów pozwala jednocześnie dodawać wyściółkę do wielu stron i tutaj jest praktykowana przy użyciu następującego kodu.

Własność wyściółka w CSS

Korzystanie z wyściółki w PX

Używanie wyściółki 3% do górnego/dolnego i 6% po lewej/prawej stronie

Używanie wyściółki 2EM do górnej/dolnej i 3EM do prawej/lewej

Używanie wyściółki 5px na wszystkie strony

pomijanie wyściółki po lewej stronie

Opis kodu jest podany poniżej

• zdefiniowane różne style, takie jak kolor tła, szerokość i styl graniczny dla wszystkich akapitów
• Pięć klas CSS jest używanych o nazwie „All”, „Trio”, „Duo”, „Nano” i „Skip”.
• Klasa „wszystkie” pozwala na dodanie różnych wartości wyściółki do wszystkich stron
• Klasa „Trio” dodaje wartość wyściółki 3% do górnego/dolnego i 6% do prawej/lewej
• Klasa „Duo” zezwala na wyściółkę nieruchomości na górze/na dole 2EM i po prawej/lewej stronie
• „Nano” doda wartość wyściółki 5px do wszystkich boków
• Klasa „Skip” dodaje wyściółkę do trzech stron, a ona pominąłaby po lewej stronie (ponieważ jej wartość wynosi 0 w powyższej klasie CSS).

Notatka: Oprócz pominięcia wyściółki po lewej stronie, każda inna strona można pominąć za pomocą wartości 0 na miejscu.

Obraz kodu pokazano poniżej

Wyjście

Z powyższego wyjścia można uzyskać pojęcie właściwości wyściółki w różnych scenariuszach.

Powyższe przykłady umożliwiają poznanie funkcjonalności wyściółki w następujących kontekstach:

• Używanie właściwości wyściółki z każdej strony indywidualnie
• Korzystanie z właściwości wyściółki o różnych wartościach pomiarowych (PX, % i EM)
• Korzystanie z właściwości wyściółki w celu dodania wyściółki z wielu stron jednocześnie lub pomijania dowolnej strony

Wniosek

Wyściółka jest właściwością używaną do tworzenia przestrzeni wokół elementu. Wyściółka może być dostarczana na poszczególne strony za pomocą, wyściółki, prawej wyściółki, wyściółki i wyściółki. Ten pouczający post oświeca mechanizm pracujący i wykorzystanie nieruchomości wyściółki w CSS. Ponadto dostarczyliśmy również wskazówki dotyczące pracy nad wyściółką, która zawiera połączony efekt wyściółki/prawej/dolnej/lewej i jest stosowany z wielu stron jednocześnie.