Відступи

2.1 Внутрішні відступи (Padding)

Внутрішні відступи (padding) визначають простір між вмістом елемента і його межами. padding можна задавати для кожної сторони елемента: зверху, праворуч, знизу і зліва. Внутрішні відступи можуть бути корисні для створення простору навколо вмісту елемента, щоб він не прилягає впритул до меж.

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

У цьому прикладі до елемента з класом .padding застосовані внутрішні відступи в 20 пікселів з усіх сторін, створюючи простір навколо вмісту.

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

    
      <div class="padding">
        Це елемент з внутрішніми відступами.
      </div>
    
  

2.2 Зовнішні відступи (Margin)

Зовнішні відступи (margin) визначають простір між елементом і сусідніми елементами. Зовнішні відступи можуть задаватися для кожної сторони елемента: зверху, праворуч, знизу і зліва. Зовнішні відступи корисні для створення простору між елементами, щоб уникнути їх накладання.

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

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

    
      <div class="margin">
        Це елемент з зовнішніми відступами.
      </div>
    
  

2.3 Взаємодія компонентів блокової моделі

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

Приклад взаємодії компонентів:

    
      .box {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px solid #000;
        margin: 30px;
        width: 200px;
      }
    
  

    
      <div class="box">
        Це елемент з зовнішніми та внутрішніми відступами.
      </div>
    
  

Пояснення коду:

• Вміст: текст всередині елемента
• Відступи: 20 пікселів, що створюють простір між вмістом і межею
• Межі: 5 пікселів, що оточують елемент
• Зовнішні відступи: 30 пікселів, що створюють простір між елементом і іншими елементами на сторінці

2.4 Негативні зовнішні відступи

Зовнішні відступи можуть мати негативні значення, що призводить до перекриття елементів.

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

    
      <div>
        Це звичайний елемент
      </div>
      <div class="negative-margin">
        Це елемент з негативним верхнім відступом.
      </div>
    
  

2.5 Колапс зовнішніх відступів

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

    
      .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">
        Це перший елемент.
      </div>

      <div class="box2">
        Це другий елемент. Зовнішні відступи схлопнулися до 30 пікселів.
      </div>