Блочная модель

Что такое box model?

Каждый элемент на веб-странице можно представить как прямоугольную коробку (box), которая состоит из нескольких областей:

• Content - основная область, где отображается текст, изображение и т.д;
• Padding - внутренний отступ (расстояние между Content и Border);
• Border - рамка вокруг Content и Padding;
• Margin - внешний отступ (пространство снаружи элемента).

┌────────────────────────────────────────────┐
│                MARGIN                      │←---margin (внешний отступ)
│  ┌──────────────────────────────────────┐  │
│  │            BORDER                    │←------border (граница)
│  │  ┌──────────────────────────────┐    │  │
│  │  │          PADDING             │←-----------padding (внутренний отступ)
│  │  │  ┌──────────────────────┐    │    │  │
│  │  │  │      CONTENT         │    │    │  │
│  │  │  └──────────────────────┘    │    │  │
│  │  └──────────────────────────────┘    │  │
│  └──────────────────────────────────────┘  │
└────────────────────────────────────────────┘

Типы блочных моделей

• box-sizing - блочная модель;
  • content-box - width и height прибавляются к padding и border (используется по умолчанию);
  • border-box - width и height задают размер всей коробки;

Например. Изменим файл index.html:

<div class="content-box-example">content-box</div>

<div class="border-box-example">border-box</div>

Изменим файл styles.css:

.content-box-example,
.border-box-example {
    width: 200px;
    height: 100px;
    padding: 20px;
    margin: 20px;
}

.content-box-example {
    border: 5px solid blue;
    background: lightblue;
    box-sizing: content-box;
}

.border-box-example {
    border: 5px solid green;
    background: lightgreen;
    box-sizing: border-box;
}

Ширина синей области = width + padding * 2 + border * 2 = 200 + 20 * 2 + 5 * 2 = 250px;

Высота синей области = height + padding * 2 + border * 2 = 100 + 20 * 2 + 5 * 2 = 150px;

Ширина зелёной области = width (высчитывается автоматически) + padding * 2 + border * 2 = 150 + 20 * 2 + 5 * 2 = 200px;

Высота зелёной области = height (высчитывается автоматически) + padding * 2 + border * 2 = 50 + 20 * 2 + 5 * 2 = 100px;