Własność CSS margin-bottom

Własność CSS margin-bottom ustawia szerokość dolnego marginesu fizycznego elementu. Jest to własność niedziedziczona.

Przykład

W tym przykładzie element article będzie miał dolny margines o szerokości 20 pikseli:

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

Efekt:

Gdyby usunięto deklarację własności margin-bottom z powyższej reguły CSS, to te elementy wyglądałyby tak:

Obsługiwane wartości

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

• Liczba z jednostką długości
• Procenty – wartości procentowe odnoszą się do szerokości nadrzędnego elementu blokowego, czyli zawierającego ten element, dla którego jest zdefiniowany margines.
• Słowo kluczowe auto

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

Składnia

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

margin-bottom: wartość;

Zastosowanie

Wszystkie elementy z wyjątkiem elementów tabeli, które mają własność display ustawioną na inną wartość niż table-caption, table oraz inline-table.

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

Podsumowanie