Własność CSS padding-bottom

Własność CSS padding-bottom ustawia szerokość dolnego dopełnienia fizycznego elementu. Jest to własność niedziedziczona.

Przykład

W tym przykładzie element article będzie miał dolne dopełnienie o szerokości 20 pikseli:

article {
  padding-bottom: 20px;
  width: 200px;
  background-color: lightpink;
}
...
<article>Treść elementu</article>

Efekt:

Efekt zastosowania własności padding-bottom

Gdyby usunięto deklarację własności padding-bottom z powyższej reguły CSS, ten element wyglądałby tak:

Efekt braku własności padding-bottom

Obsługiwane wartości

Typy wartości przyjmowane przez własność padding-bottom:

Wartość początkowa własności padding-bottom to 0.

Składnia

Własność padding-bottom przyjmuje jedną wartość typu opisanego powyżej, która określa szerokość dolnego dopełnienia elementu.

padding-bottom: wartość;

Zastosowanie

Własność padding-bottom ma zastosowanie do wszystkich elementów z wyjątkiem wewnętrznych elementów tabeli, nie licząc komórek, a więc tych, które mają własność display ustawioną na table-row-group, table-header-group, table-footer-group, table-row, table-column-group lub table-column. Standardowo zaliczają się do nich elementy tr, th, tfoot, colgroup, col, thead i tbody.

Dodatkowo własność padding-bottom działa także w pseudoelementach ::first-letter i ::first-line.

Podsumowanie

ZastosowanieWszystkie elementy z wyjątkiem tych, które mają własność display ustawioną na table-row-group, table-header-group, table-footer-group, table-row, table-column-group lub table-column
Obsługiwane wartości
Wartość początkowa0
DziedziczenieNie
SpecyfikacjaCSS Box Model Module Level 3 – padding-bottom

Podobał Ci się ten artykuł?

Oceń go!

Średnia 0 / 5. Liczba głosów: 0

Jeszcze nikt nie głosował. Wyprzedź innych i zagłosuj.

Skoro spodobał Ci się ten artykuł...

Poleć go znajomym!

Ojej :( Powiedz nam, co powinniśmy poprawić!

Jajko z dzwonkiem
Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.

Dodaj komentarz

7 − 3 =