Własność CSS margin

Własność CSS margin to własność zbiorcza CSS służąca do ustawiania szerokości marginesów fizycznych z wszystkich czterech stron na raz. Jest to własność niedziedziczona, która obejmuje cztery indywidualne własności marginesów:

• margin-top
• margin-right
• margin-bottom
• margin-left

Przykład

W tym przykładzie elementy section będą miały margines o szerokości 10 pikseli z każdej strony:

div {
  border: 1px solid black;
  width: 200px;
}
section {
  margin: 10px;
  background-color: lightpink;
}
...
<div>
  <section>Sekcja</section>
  <section>Sekcja</section>
</div>

Efekt:

Gdyby usunięto deklarację własności margin 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:

• Liczby z jednostką długości
• Procenty – wartości procentowe odnoszą się do szerokości (w przypadku dokumentów zawierających tekst w języku pisanym od lewej do prawej strony) nadrzędnego elementu blokowego, czyli zawierającego ten element, dla którego jest zdefiniowany margines.
• auto – szerokość marginesu jest dobierana przez przeglądarkę. Tej wartości czasami używa się do centrowania elementów na stronie.

W jednej deklaracji własności margin można mieszać różne typy wartości, a więc poniższa deklaracja, choć niezbyt rozsądna, jest prawidłowa:

margin: 10px 4mm 1% 7pc;

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

Składnia

Własność margin przyjmuje jedną, dwie, trzy lub cztery wartości. Jeśli wartości jest mniej niż cztery, to brakujące są uzupełniane automatycznie wg ściśle określonych zasad:

• Jedna wartość: jeśli zostanie zdefiniowana tylko jedna wartość, to zostanie ona zastosowana z wszystkich czterech stron, np.:

  margin: 10px;

  Margines z każdej strony będzie miał szerokość 10 pikseli. To samo, co:

  margin-top: 10px;
  margin-right: 10px;
  margin-bottm: 10px;
  margin-left: 10px;

• Dwie wartości: jeśli są zdefiniowane dwie wartości, to pierwsza odnosi się do marginesu górnego i dolnego, a druga – do marginesu lewego i prawego, np.:

  margin: 10px 20px;

  Marginesy górny i dolny będą mieć po 10 pikseli szerokości, a lewy i prawy: po 20 pikseli szerokości. To samo, co:

  margin-top: 10px;
  margin-right: 20px;
  margin-bottm: 10px;
  margin-left: 20px;

• Trzy wartości: jeśli są zdefiniowane trzy wartości, to pierwsza odnosi się do marginesu górnego, druga – do lewego i prawego, a trzecia – do dolnego.

  margin: 10px 15px 20px;

  Górny margines będzie miał 10 pikseli szerokości, lewy i prawy – po 15 pikseli szerokości, a dolny – 20 pikseli szerokości. To samo, co:

  margin-top: 10px;
  margin-right: 15px;
  margin-bottm: 20px;
  margin-left: 15px;

• Cztery wartości: jeśli są zdefiniowane cztery wartości, to odnoszą się po kolei do górnego, prawego, dolnego i lewego marginesu.

  margin: 5px 10px 15px 20px;

  Górny margines będzie miał 5, prawy – 10, dolny – 15, a lewy 20 pikseli szerokości. To samo, co:

  margin-top: 5px;
  margin-right: 10px;
  margin-bottm: 15px;
  margin-left: 20px;

Zastosowanie

Własność margin ma zastosowanie do wszystkich elementów 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 działa także w pseudoelementach ::first-letter i ::first-line.

Podsumowanie