Вступ до блочної моделі

1.1 Основи блочної моделі

Блочна модель є основою для розуміння того, як елементи розміщуються та взаємодіють один з одним на веб-сторінці. Вона визначає структуру і розміри HTML-елементів, а також те, як вони оточуються відступами, межами та зовнішніми відступами.

Основи блочної моделі

Блочна модель CSS описує склад блоків HTML-елементів. Кожен елемент складається з чотирьох основних компонентів:

• Вміст (content).
• Відступи (padding).
• Межі (border).
• Зовнішні відступи (margin).

Ці компоненти визначають, як елемент буде відображатися і як він буде взаємодіяти з іншими елементами на сторінці.

Вміст (Content)

Вміст (content) — це основна частина елемента, яка містить текст, зображення чи інші вкладені елементи. Розміри вмісту можуть бути задані явно за допомогою властивостей width і height, або визначатися вмістом елемента.

Приклад використання

У цьому прикладі вміст елемента .content включає текст "Це вміст елемента.":

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

    
      <div class="content">
        Це вміст елемента.
      </div>
    
  

1.2 Візуалізація блочної моделі

Кожен елемент у блочній моделі можна представити у вигляді прямокутного блоку, який складається з наступних частин:

• Контент (Content): внутрішній контент елемента, наприклад, текст або зображення
• Внутрішній відступ (Padding): простір між контентом і межею елемента
• Межа (Border): лінія, що оточує внутрішній відступ і контент
• Зовнішній відступ (Margin): простір між межею елемента і сусідніми елементами

Візуалізація блочної моделі:

    
      .element {
        width: 200px;           /* Ширина контенту */
        padding: 10px;          /* Внутрішній відступ */
        border: 2px solid red;  /* Межа */
        margin: 20px;           /* Зовнішній відступ */
      }
    
  

1.3 Межі (Border)

Межі (border) оточують вміст і внутрішні відступи елемента. У меж можуть бути різні стилі, товщина та колір. Межі можуть використовуватися для візуального виділення елементів на сторінці.

Приклад використання

У цьому прикладі до елемента .border застосована межа товщиною 5 пікселів, пунктирна та чорного кольору, яка оточує вміст і внутрішні відступи.

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

    
      <div class="border">
        Це елемент з межею.
      </div>