Odstępy

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>