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

Лейла задала карточке width: 300px, потом добавила внутренний отступ и рамку — и карточка вдруг перестала помещаться в колонку шириной 300 пикселей. Почему? Потому что для браузера каждый элемент на странице — это блок (прямоугольная коробка), и его размер не сводится к одному width. Кто понял блочную модель, тот избавился от половины сюрпризов в CSS.

Каждый элемент — это блок

Блок состоит из четырёх слоёв — изнутри наружу. Его можно сравнить с посылкой: вещь внутри — это содержимое, защитный поролон вокруг неё — внутренний отступ, картонная коробка — рамка, а расстояние до соседних посылок — внешний отступ.

1. content (содержимое) — текст, изображение или дочерние элементы. Размер задают width и height.
2. padding (внутренний отступ) — пространство между содержимым и рамкой. Фон элемента распространяется и на него.
3. border (рамка) — граница блока: border: 2px solid teal задаёт толщину, тип линии и цвет.
4. margin (внешний отступ) — прозрачное расстояние между блоком и соседними элементами.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .margin-zone { display: inline-block; background: #fde68a; }
  .box {
    width: 200px;
    padding: 20px;
    border: 6px solid #6366f1;
    margin: 24px;
    background: #e0e7ff;
  }
</style>

<div class="margin-zone">
  <div class="box">Content: 200px wide</div>
</div>
<p>Yellow = margin, blue frame = border,<br>light blue around the text = padding.</p>

Блочные и строчные элементы

Свойство display определяет, как ведёт себя блок. Блочные элементы (<div>, <p>, <h1>, <ul>) начинаются с новой строки и занимают всю доступную ширину. Строчные (<span>, <a>, <strong>) остаются внутри текста: width и height на них не действуют, а вертикальный margin не раздвигает соседние строки. inline-block сочетает достоинства обоих: остаётся в строке, но принимает размеры.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; line-height: 1.8; }
  .demo { background: #fde68a; border: 1px solid #f59e0b; }
  span.demo { width: 300px; }
  .ib { display: inline-block; width: 110px; text-align: center; background: #bbf7d0; }
</style>

<div class="demo">A div is a block: it takes the whole line.</div>
<p>A <span class="demo">span is inline</span>: width 300px is ignored.
  An <span class="ib">inline-block</span> accepts a width.</p>

Сокращённая запись отступов

Каждую сторону можно задать отдельно: margin-top, margin-right, margin-bottom, margin-left. Но чаще используют сокращённую запись — одно свойство с одним, двумя, тремя или четырьмя значениями:

Чтобы отцентрировать блочный элемент с заданной шириной, сделай его левый и правый внешние отступы равными auto: margin: 0 auto. Браузер поровну разделит свободное место между двумя сторонами.

<style>
  body { font-family: system-ui, sans-serif; background: #f1f5f9; padding: 12px; }
  .card {
    max-width: 260px;
    margin: 0 auto;
    padding: 12px 20px 20px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
  }
  .btn { display: inline-block; padding: 8px 16px; border-radius: 999px;
         background: #14b8a6; color: white; }
</style>

<div class="card">
  <h3>Centered card</h3>
  <p>margin: 0 auto puts me in the middle.</p>
  <span class="btn">Read more</span>
</div>

`box-sizing`: как считается размер

По умолчанию действует box-sizing: content-box: width — это только ширина содержимого, а внутренний отступ и рамка добавляются сверху. Именно в этом была проблема Лейлы. С box-sizing: border-box значение width — это ширина всего видимого блока вместе с рамкой, а отступ и рамка занимают место внутри. Считать становится гораздо проще.

<style>
  body { font-family: system-ui, sans-serif; padding: 12px; }
  .ruler { width: 200px; height: 6px; background: #1e293b; margin-bottom: 8px; }
  .demo { width: 200px; padding: 20px; border: 5px solid #0ea5e9;
          margin-bottom: 12px; background: #e0f2fe; }
  .bb { box-sizing: border-box; border-color: #f97316; background: #ffedd5; }
</style>

<div class="ruler"></div>
<div class="demo">content-box: 200 + 40 + 10 = 250px</div>
<div class="demo bb">border-box: exactly 200px</div>