Marginesy i odstępy (margin, padding)

Marginesy i odstępy (margin, padding)

W CSS masz pełną kontrolę nad tym, ile miejsca znajduje się wokół i wewnątrz elementów.
Do tego służą dwie bardzo ważne właściwości:

• margin – zewnętrzny odstęp (odległość od innych elementów)
• padding – wewnętrzny odstęp (odległość między zawartością a krawędzią elementu)

Te dwie właściwości są kluczowe w układzie strony i często używane razem.

1. margin – zewnętrzne odstępy

Właściwość margin ustala, ile przestrzeni ma być na zewnątrz elementu – np. między paragrafami, nagłówkami czy blokami.

Przykład:

h1 {
  margin-bottom: 20px;
}

Możesz stosować skrócone zapisy:

/* wszystkie strony po 10px */
p {
  margin: 10px;
}

/* góra-dół: 10px, lewo-prawo: 20px */
p {
  margin: 10px 20px;
}

/* góra: 10px, prawo: 15px, dół: 20px, lewo: 5px */
p {
  margin: 10px 15px 20px 5px;
}

Kolejność w zapisie czterech wartości: góra, prawo, dół, lewo (zgodnie z ruchem wskazówek zegara).

2. padding – wewnętrzne odstępy

Padding to przestrzeń między krawędzią elementu a jego zawartością (np. tekstem wewnątrz przycisku lub bloku).

Przykład:

div {
  padding: 15px;
}

Działa identycznie jak margin – możesz podać jedną, dwie lub cztery wartości:

/* wewnętrzny odstęp: 20px ze wszystkich stron */
p {
  padding: 20px;
}

/* góra/dół: 10px, lewo/prawo: 30px */
p {
  padding: 10px 30px;
}

Padding świetnie nadaje się do poprawienia wyglądu tekstów w ramkach, przyciskach, banerach itd.

3. margin vs padding – różnica

Padding to odstęp wewnętrzny – od tekstu do krawędzi tła/bloku.
Margin to odstęp zewnętrzny – od krawędzi bloku do sąsiednich elementów.

Oba wpływają na układ strony, ale w inny sposób.

.box {
  background-color: lightblue;
  margin: 20px;
  padding: 15px;
}

HTML:

<div class="box">
  To jest element z marginesem i paddingiem.
</div>

🎯 Ćwiczenie w JSFiddle

Przetestuj działanie margin i padding w JSFiddle.

HTML:

<div class="blok1">Pierwszy blok</div>
<div class="blok2">Drugi blok</div>

CSS:

.blok1 {
  background-color: #e0f7fa;
  padding: 20px;
  margin-bottom: 20px;
}

.blok2 {
  background-color: #ffecb3;
  padding: 10px 30px;
}

✅ Podsumowanie

• margin – tworzy odstęp NA ZEWNĄTRZ elementu
• padding – tworzy odstęp WEWNĄTRZ elementu
• Obie właściwości przyjmują 1–4 wartości, które określają przestrzeń z każdej strony

Opanowanie marginu i paddingu pozwoli Ci na tworzenie przejrzystych, dobrze rozmieszczonych stron.

🧠 Teraz czas sprawdzić swoją wiedzę!
Rozwiąż krótki quiz składający się z 5 pytań, aby utrwalić to, czego się nauczyłeś w tej lekcji.