margin vs padding
margin to przezroczysty odstęp na zewnątrz elementu. padding to odstęp wewnątrz obramowania, między treścią a krawędzią, i przyjmuje tło elementu.
Porównanie w tabeli
#Gdzie leży względem obramowania
Pokazuje tło elementu
Wartości ujemne
Łączenie się z sąsiadem (collapsing)
Wyśrodkowanie bloku
Typowe użycie
Przykład
#.card {
margin-bottom: 16px;
padding: 16px;
border: 1px solid #3f3f46;
border-radius: 10px;
}<div class="stage" style="padding: 0; background: repeating-linear-gradient(45deg, rgba(245,158,11,.12) 0 6px, transparent 6px 12px);">
<div class="card box" style="width: auto; display: block; margin: 16px;">Padding rozsuwa treść od krawędzi, margin odsuwa całą kartę od tła.</div>
</div>Definicja i zastosowanie
#Obie właściwości dodają wolne miejsce, ale w innym miejscu modelu pudełkowego. margin leży poza obramowaniem elementu i oddziela go od sąsiadów, dlatego jest zawsze przezroczysty, widać przez niego to, co jest pod spodem. padding leży wewnątrz obramowania, między treścią a krawędzią, więc dziedziczy tło i kolor elementu: przycisk z paddingiem "oddycha", bo tło rozciąga się razem z nim.
Różnica widać też w zachowaniu. margin może być ujemny, co przysuwa albo nakłada elementy na siebie, a pionowe marginesy dwóch sąsiadujących bloków czasem się zlewają w jeden, większy odstęp (collapsing). padding nigdy nie bywa ujemny i nigdy się nie zlewa z niczym.
W praktyce wybór jest prosty: odstęp między kartami, akapitami czy elementami listy to margin albo, jeszcze lepiej w kontenerach flex i grid, właściwość gap. Odstęp między treścią przycisku, pola czy karty a ich krawędzią to padding.
Składnia
#margin: <góra> <prawa>? <dół>? <lewa>?;
padding: <góra> <prawa>? <dół>? <lewa>?;Więcej przykładów
#.avatar {
margin-left: -12px;
border: 2px solid #0c0c10;
}
.avatar:first-child {
margin-left: 0;
}<div class="stage" style="display: flex;">
<span class="box avatar" style="border-radius: 999px; margin-left: 0;">A</span>
<span class="box avatar" style="border-radius: 999px; margin-left: -12px; border: 2px solid #0c0c10;">N</span>
<span class="box avatar" style="border-radius: 999px; margin-left: -12px; border: 2px solid #0c0c10;">K</span>
</div>Ujemny margines nakłada awatary na siebie, jak w popularnym wzorze "kto jest online".
.button-tight {
padding: 2px 4px;
}
.button-comfy {
padding: 10px 18px;
}<div class="stage" style="display: flex; gap: 10px; align-items: center;">
<button class="button-tight" style="border: 0; border-radius: 6px; background: #7c3aed; color: #fff;">Mały</button>
<button class="button-comfy" style="border: 0; border-radius: 10px; background: #7c3aed; color: #fff;">Wygodny</button>
</div>Obszar klikalny na telefonie powinien mieć co najmniej około 44px, o czym decyduje właśnie padding.
Dobre praktyki
#- Odstępy między elementami listy, kart czy pól formularza ustawiaj przez
gapkontenera, zamiast marginesów na każdym elemencie. - Jeśli element "znika" pod sąsiadem albo robi się za duży, sprawdź najpierw padding: przy
box-sizing: content-boxpowiększa element ponadwidth. - Margines pomiędzy sekcjami bywa nieprzewidywalny przez collapsing. W razie wątpliwości sprawdź wynik w narzędziach deweloperskich.
Powiązane hasła
#- marginUstawia zewnętrzny odstęp elementu od sąsiadów.
- paddingUstawia wewnętrzny odstęp między treścią a obramowaniem.
- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- box-sizingDecyduje, czy width i height obejmują padding i obramowanie.
- borderSkrót, który ustawia grubość, styl i kolor obramowania.
Widzisz błąd albo brakuje przykładu? Napisz do nas.