Odstępy

Dostępny

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.

CSS
.padding {
  background-color: #e0e0e0;
  padding: 20px;
  border: 2px solid #000;
}
HTML
<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:

CSS
.margin {
  background-color: #e0e0e0;
  border: 2px solid #000;
  margin: 20px;
}
HTML
<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:

CSS
.box {
  background-color: #e0e0e0;
  padding: 20px;
  border: 5px solid #000;
  margin: 30px;
  width: 200px;
}
HTML
<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.

CSS
.negative-margin {
  background-color: #e0e0e0;
  padding: 20px;
  border: 2px solid #000;
  margin-top: -12px;
}
HTML
<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.

CSS
.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;
}
HTML
<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>
1
Zadanie
Frontend SELF PL,  poziom 16lekcja 2
Niedostępne
Wewnętrzne odstępy
Wewnętrzne odstępy
1
Zadanie
Frontend SELF PL,  poziom 16lekcja 2
Niedostępne
Margines zewnętrzne
Margines zewnętrzne
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy