2.1 Wewnętrzne odstępy (Padding)
Wewnętrzne odstępy (padding
) definiują przestrzeń między zawartością elementu a jego krawędziami. padding
można ustawić dla każdej strony elementu: od góry, z prawej, z dołu i z lewej. Wewnętrzne odstępy mogą być przydatne do tworzenia przestrzeni wokół zawartości elementu, aby nie przylegała ona bezpośrednio do krawędzi.
Przykład użycia
W tym przykładzie do elementu z klasą .padding
zastosowano wewnętrzne odstępy o wartości 20 pikseli ze wszystkich stron, tworząc przestrzeń wokół zawartości.
.padding {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
}
<div class="padding">
To jest element z wewnętrznymi odstępami.
</div>
2.2 Zewnętrzne odstępy (Margin)
Zewnętrzne odstępy (margin
) definiują przestrzeń między elementem a sąsiednimi elementami. Zewnętrzne odstępy mogą być ustawiane dla każdej strony elementu: od góry, z prawej, z dołu i z lewej. Zewnętrzne odstępy są przydatne do tworzenia przestrzeni między elementami, aby uniknąć ich nakładania się.
Przykład użycia:
.margin {
background-color: #e0e0e0;
border: 2px solid #000;
margin: 20px;
}
<div class="margin">
To jest element z zewnętrznymi odstępami.
</div>
2.3 Współdziałanie komponentów modelu blokowego
Wszystkie cztery komponenty modelu blokowego (zawartość, odstępy, krawędzie i zewnętrzne odstępy) współpracują ze sobą, aby określić całkowity rozmiar i położenie elementu na stronie.
Przykład współdziałania komponentów:
.box {
background-color: #e0e0e0;
padding: 20px;
border: 5px solid #000;
margin: 30px;
width: 200px;
}
<div class="box">
To jest element z zewnętrznymi i wewnętrznymi odstępami.
</div>
Wyjaśnienie kodu:
- Zawartość: tekst wewnątrz elementu
- Odstępy: 20 pikseli, tworzą przestrzeń między zawartością a krawędzią
- Krawędzie: 5 pikseli, otaczają element
- Zewnętrzne odstępy: 30 pikseli, tworzą przestrzeń między elementem a innymi elementami na stronie
2.4 Ujemne zewnętrzne odstępy
Zewnętrzne odstępy mogą mieć wartości ujemne, co prowadzi do nakładania się elementów.
.negative-margin {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-top: -12px;
}
<div>
To jest zwykły element
</div>
<div class="negative-margin">
To jest element z ujemnym górnym odstępem.
</div>
2.5 Kolaps zewnętrznych odstępów
Gdy pionowe zewnętrzne odstępy dwóch sąsiednich bloków spotykają się, mogą złożyć się w wspólny odstęp, równy większemu z dwóch.
.box1 {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-bottom: 30px;
}
.box2 {
background-color: #d0d0d0;
padding: 20px;
border: 2px solid #000;
margin-top: 20px;
}
<div class="box1">
To jest pierwszy element.
</div>
<div class="box2">
To jest drugi element. Zewnętrzne odstępy złożyły się do 30 pikseli.
</div>