Wprowadzenie do modelu blokowego

1.1 Podstawy modelu blokowego

Model blokowy to podstawa do zrozumienia, jak elementy są rozmieszczane i współdziałają ze sobą na stronie internetowej. Określa strukturę i wymiary elementów HTML oraz to, jak są one otoczone przez odstępy, obramowania i zewnętrzne odstępy.

Podstawy modelu blokowego

Model blokowy CSS opisuje skład bloków elementów HTML. Każdy element składa się z czterech głównych komponentów:

• Zawartość (content).
• Odstępy (padding).
• Obramowania (border).
• Zewnętrzne odstępy (margin).

Te komponenty określają, jak element będzie wyświetlany i jak będzie współdziałać z innymi elementami na stronie.

Zawartość (Content)

Zawartość (content) to główna część elementu, w której znajduje się tekst, obrazy lub inne zagnieżdżone elementy. Wymiary zawartości mogą być określone za pomocą właściwości width i height, albo być zdefiniowane przez zawartość elementu.

Przykład użycia

W tym przykładzie zawartość elementu .content zawiera tekst "To jest zawartość elementu.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        To jest zawartość elementu.
      </div>
    
  

1.2 Wizualizacja modelu blokowego

Każdy element w modelu blokowym można przedstawić jako prostokątny blok, składający się z następujących części:

• Zawartość (Content): wewnętrzna zawartość elementu, na przykład tekst lub obraz
• Odstęp wewnętrzny (Padding): przestrzeń pomiędzy zawartością a obramowaniem elementu
• Obramowanie (Border): linia otaczająca odstęp wewnętrzny i zawartość
• Odstęp zewnętrzny (Margin): przestrzeń pomiędzy obramowaniem elementu a sąsiadującymi elementami

Wizualizacja modelu blokowego:

    
      .element {
        width: 200px;           /* Szerokość zawartości */
        padding: 10px;          /* Odstęp wewnętrzny */
        border: 2px solid red;  /* Obramowanie */
        margin: 20px;           /* Odstęp zewnętrzny */
      }
    
  

1.3 Obramowania (Border)

Obramowania (border) otaczają zawartość i wewnętrzne odstępy elementu. Obramowania mogą mieć różne style, grubości i kolory. Mogą być używane do wizualnego wyróżniania elementów na stronie.

Przykład użycia

W tym przykładzie do elementu .border zastosowano obramowanie o grubości 5 pikseli, linię przerywaną i czarnego koloru, która otacza zawartość i wewnętrzne odstępy.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        To jest element z obramowaniem.
      </div>