Model blokowy HTML

9.1 Elementy blokowe

Model blokowy HTML — to koncepcja opisująca strukturę i wyświetlanie elementów HTML w dokumencie. Pomaga ona programistom zrozumieć, jak elementy ze sobą współdziałają i jak są rozmieszczone na stronie. Zrozumienie modelu blokowego jest ważne dla tworzenia ustrukturyzowanych i estetycznie atrakcyjnych stron internetowych.

Model blokowy HTML składa się z dwóch głównych typów elementów: blokowych i liniowych. Te elementy odgrywają kluczową rolę w tworzeniu układu stron internetowych.

Elementy blokowe

Przykład elementu blokowego:

    
      <div>
        <h1>Nagłówek</h1>
        <p>To jest akapit tekstu wewnątrz elementu blokowego div.</p>
      </div>
    
  

9.2 Elementy liniowe

Elementy liniowe (inline-level elements) zajmują tylko niezbędną szerokość dla swojej zawartości i nie zaczynają się od nowej linii. Mogą zawierać tylko elementy liniowe lub tekst. Przykłady elementów liniowych:

Przykład elementu liniowego:

    
      <span>To jest akapit z <strong>pogrubionym tekstem</strong> i <em>kursywą</em>.</span>
    
  

9.3 Składniki modelu blokowego

Każdy element w modelu blokowym można przedstawić w postaci prostokątnego bloku, składającego się z następujących części:

• Treść (Content): wewnętrzna zawartość elementu, na przykład tekst lub obraz
• Wewnętrzny margines (Padding): przestrzeń między treścią a granicą elementu
• Granica (Border): linia otaczająca wewnętrzny margines i treść
• Zewnętrzny margines (Margin): przestrzeń między granicą elementu a sąsiednimi elementami

Wizualizacja modelu blokowego:

    
      .element {
        width: 200px;           /* Szerokość treści */
        padding: 10px;          /* Wewnętrzny margines */
        border: 2px solid red;  /* Granica */
        margin: 20px;           /* Zewnętrzny margines */
      }
    
  

Przykład HTML z modelem blokowym:

W tym przykładzie element <div> z klasą "box" ma szerokość 200px, wewnętrzny margines 10px, granicę 2px i zewnętrzny margines 20px. Te właściwości określają, jak element jest wyświetlany na stronie i współdziała z innymi elementami.

    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
    
  

    
      <div class="box">
        To jest przykład modelu blokowego.
      </div>