CSS - margin i padding

Margin i Padding to dwa kluczowe pojęcia w CSS, które mają ogromny wpływ na rozmieszczenie elementów na stronie. Choć często bywają mylone, ich funkcje są różne.

Zobaczmy to krok po kroku:

Różnica w skrócie

Właściwość	Co robi	Gdzie działa
margin	Tworzy odstęp na zewnątrz elementu, między nim, a innymi elementami.	Na zewnątrz ramki (border).
padding	Tworzy odstęp wewnątrz elementu, między jego zawartością (np. tekstem), a ramką.	Wewnątrz ramki (border).

Model pudełkowy (Box Model)

Każdy element HTML można sobie wyobrazić jak pudełko składające się z czterech warstw:

Przykład w CSS

HTML:

<div class="pudelko">Tekst wewnątrz pudełka</div>

Style:
.pudelko {
background-color: lightblue;
border: 2px solid navy;
padding: 20px; /* odstęp między ramką a tekstem */
margin: 30px; /* odstęp między pudełkiem a innymi elementami */
}

Efekt:

padding: 20px – tekst nie dotyka ramki.
margin: 30px – całe pudełko odsuwa się od innych elementów o 30px.

Kierunki i skrócone zapisy

Możesz ustawiać marginesy i padding osobno dla każdej strony:

lub skróconym zapisem (zgodnie z ruchem wskazówek zegara od góry):

margin: 10px 20px 30px 40px;

Analogicznie dla paddingu:

Wpływ na wymiary elementu

Domyślnie (przy box-sizing: content-box):

width i height odnoszą się tylko do content,
czyli padding i border powiększają całkowity rozmiar elementu.

Przykład:

Całkowita szerokość = 200 + 20 + 20 + 10 + 10 = 260px

Ciekawostki i pułapki

Marginesy pionowe (top/bottom) między elementami mogą się nakładać (collapse) – np. dwa paragrafy z margin-top: 20px i margin-bottom: 30px nie dadzą 50px odstępu, tylko 30px (większy z nich).
Padding wewnątrz elementu wpływa na tło — tło koloru lub obraz rozciąga się aż do krawędzi paddingu.
Margin nie ma wpływu na tło — tworzy „przezroczysty” odstęp.

Zadanie 1 — Podstawowy padding

Cel: Zrozumienie, jak działa padding wewnątrz elementu.

Polecenie:
Utwórz prosty element <div> z tekstem w środku.
Nadaj mu:

kolor tła (np. jasnoniebieski),
ramkę (border: 2px solid navy;),
padding 20px.

Zobacz, jak zmienia się położenie tekstu wewnątrz ramki.

Zadanie 2 — Margin między elementami

Cel: Zrozumienie odstępu między dwoma elementami.

Polecenie:
Stwórz dwa <div>y, jeden pod drugim, każdy z:

kolorem tła (np. zielony i pomarańczowy),
wysokością 100px,
margin-bottom: 20px dla pierwszego.

Sprawdź, jak margin oddziela elementy.
Zmień margin-bottom na margin-top drugiego elementu i zobacz, że efekt wizualny jest taki sam (bo marginesy pionowe się nakładają).

Zadanie 3 — Margin i padding w kombinacji

Cel: Rozróżnienie, gdzie działa margin, a gdzie padding.

Polecenie:
Utwórz <div> z napisem „Zadanie 3”.

Dodaj mu:

Pod spodem umieść <p> z dowolnym tekstem i zobacz, jak odstęp między nimi pochodzi od marginu, a nie paddingu.

Zadanie 4 — Obraz i podpis (image + caption)

Cel: Użycie padding i margin do estetycznego rozmieszczenia obrazka i podpisu.

Polecenie:
Utwórz HTML:

<div class="foto">
  <img src="https://picsum.photos/200" alt="Losowy obraz" />

  <p>Losowe zdjęcie z serwisu Picsum</p>

</div>

Dodaj CSS:

.foto {
  border: 2px solid #333;

  background-color: #eee;

padding: 10px;

  margin: 30px auto;

  width: 220px;

  text-align: center;
}

.foto img {
  border-radius: 8px;

  margin-bottom: 10px;
}

Obserwuj:

padding wewnątrz ramki wokół zdjęcia,
margin-bottom między zdjęciem a podpisem,
margin: auto centrowanie całego bloku.

Zadanie 5 — Layout z trzema kolumnami

Cel: Wykorzystanie margin i padding do stworzenia równych odstępów między elementami.

Polecenie:

Zbuduj prosty układ trzech kolumn:

CSS:

Spróbuj:

zmienić margin na różne wartości — zobacz, jak zmieniają się odległości między kolumnami;
usunąć padding i zauważ, jak tekst „przykleja się” do ramki.

Kontakt: mgzsp22@gmail.com