Kurs HTML

Wprowadzenie: Zewnętrzny odstęp wokół elementu

Właściwość margin w CSS służy do tworzenia **zewnętrznego odstępu** wokół elementu, czyli przestrzeni między jego obramowaniem (border) a sąsiednimi elementami. Marginesy są kluczowe do kontrolowania rozmieszczenia elementów na stronie i tworzenia między nimi "oddechu".

Margines jest zawsze **przezroczysty** i nie przyjmuje koloru tła elementu.

Jedną z najważniejszych i czasem mylących cech marginesów pionowych jest ich **nakładanie się (margin collapsing)**, które omówimy szczegółowo w następnej lekcji.

Indywidualne właściwości margin-*

Podobnie jak padding, można ustawić margines dla każdej strony elementu niezależnie:

• margin-top: Margines górny.
• margin-right: Margines prawy.
• margin-bottom: Margines dolny.
• margin-left: Margines lewy.

Wartościami tych właściwości mogą być:

• <długość>: Stała wartość w jednostkach długości (np. px, em, rem). W przeciwieństwie do paddingu, marginesy **mogą przyjmować wartości ujemne**.
• <procent>: Wartość procentowa obliczana względem **szerokości (width)** kontenera nadrzędnego (containing block) - dotyczy to **wszystkich czterech** właściwości marginesu.
• auto: Specjalna wartość, która instruuje przeglądarkę, aby automatycznie obliczyła margines. Jest szczególnie ważna przy centrowaniu elementów blokowych.

.element {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 25px;
  margin-left: 5%; /* 5% szerokości rodzica */
}

.ujemny-margines {
  margin-top: -10px; /* Element przesunie się o 10px w górę */
}

Właściwość zbiorcza margin

Podobnie jak padding, właściwość zbiorcza margin pozwala ustawić marginesy dla wszystkich czterech stron jednocześnie, używając jednej, dwóch, trzech lub czterech wartości:

• Jedna wartość: margin: 20px; (wszystkie strony)
• Dwie wartości: margin: 10px 20px; (góra/dół, prawo/lewo)
• Trzy wartości: margin: 10px 20px 15px; (góra, prawo/lewo, dół)
• Cztery wartości: margin: 10px 20px 15px 5px; (góra, prawo, dół, lewo)

Właściwość zbiorcza margin może również przyjmować wartość auto.

.przyklad-1 { margin: 15px; }
.przyklad-2 { margin: 10px 30px; }
.przyklad-3 { margin: 5px 10px 15px; }
.przyklad-4 { margin: 5px 10px 15px 20px; }

Centrowanie elementów blokowych za pomocą margin: auto;

Jednym z najczęstszych zastosowań wartości auto dla marginesów jest **poziome centrowanie elementu blokowego** o określonej szerokości wewnątrz jego kontenera nadrzędnego.

Aby to osiągnąć, należy:

1. Nadać elementowi blokowemu **określoną szerokość** (width), mniejszą niż szerokość rodzica.
2. Ustawić jego lewy i prawy margines na auto. Najprościej zrobić to za pomocą skrótu: margin: 0 auto; (ustawia 0 marginesu góra/dół i automatyczny margines lewo/prawo) lub margin-left: auto; margin-right: auto;.

Przeglądarka automatycznie rozdzieli dostępną przestrzeń poziomą równo między lewy i prawy margines, efektywnie centrując element.

.kontener {
  width: 500px; /* Określona szerokość */
  margin: 20px auto; /* 20px marginesu góra/dół, auto lewo/prawo -> centrowanie */
  background-color: lightcyan;
  border: 1px solid blue;
  padding: 10px;
}

Uwaga: Ustawienie margin-top: auto; lub margin-bottom: auto; zazwyczaj skutkuje wartością 0 i nie centruje elementu w pionie w standardowym przepływie dokumentu. Pionowe centrowanie wymaga innych technik (np. Flexbox, Grid, pozycjonowanie absolutne).

Ujemne marginesy

Ujemne wartości marginesów powodują, że element "wchodzi" na przestrzeń sąsiednich elementów lub swojego rodzica. Mogą być używane do tworzenia efektów nachodzenia na siebie lub do kompensowania innych odstępów, ale należy ich używać ostrożnie, ponieważ mogą łatwo zaburzyć layout.

.box1 {
  background-color: red;
  height: 50px;
  margin-bottom: 10px;
}
.box2 {
  background-color: blue;
  height: 50px;
  margin-top: -20px; /* Box2 nachodzi na Box1 o 10px (10px - 20px = -10px) */
}

Marginesy a elementy inline

Dla elementów inline (np. <span>, <a>):

• Marginesy poziome (margin-left, margin-right) działają zgodnie z oczekiwaniami, tworząc odstęp od sąsiednich elementów w linii.
• Marginesy pionowe (margin-top, margin-bottom) **nie mają wpływu** na otaczające elementy ani na wysokość linii.

Aby móc stosować marginesy pionowe do elementu, który normalnie jest inline, należy zmienić jego display na inline-block lub block.