Первые макеты

Научись отличать блочные элементы от строчных и освой классические приёмы центрирования элемента.

10 мин · 3 вопросов

Как блоки располагаются на странице? Всё зависит от их режима отображения, которым управляет свойство display. Блочный (block) элемент ведёт себя как кирпич: он занимает всю доступную ширину и выталкивает следующий элемент на новую строку. Заголовки <h1>, абзацы <p> и теги <div> (универсальные блоки без особого смысла) по умолчанию блочные. Строчный (inline) элемент ведёт себя как слово в предложении: он занимает только место своего содержимого и стоит рядом с соседями. Ссылки <a> и теги <span> (строчный аналог <div>) по умолчанию строчные.

<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>

Свойство display позволяет изменить это поведение: display: block; на ссылке заставит её занять всю ширину, а display: inline; на <div> заставит его встроиться в текст. Учти важное ограничение строчных элементов: свойства width и height на них игнорируются. Чтобы задать элементу размер, он должен быть блочным.

a {
  display: block;
  width: 200px;
  background-color: lightblue;
}

Переходим к центрированию - вопросу, который задаёт каждый новичок. Первый случай: центрирование текста внутри блока. Свойство text-align: center; применяется к контейнеру и центрирует его строчное содержимое (текст, ссылки, изображения). Второй случай: центрирование целого блочного элемента, например карточки посреди страницы. Классический приём: задай блоку ширину, а затем напиши margin: 0 auto;. Значение auto просит браузер самому вычислить левый и правый внешние отступы: он делает их равными, что и центрирует блок.

.card {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid gray;
  padding: 16px;
}

Подведём итог тому, что ты узнал в этом модуле: ты умеешь подключать файл CSS, писать правила с селекторами, свойствами и значениями, нацеливаться на элементы по тегу, классу или id, балансировать внутренний отступ, рамку и внешний отступ, оформлять текст и, теперь, размещать и центрировать блоки. С такой базой ты уже можешь собрать простую и аккуратную веб-страницу. Следующий модуль познакомит тебя с более мощными инструментами вёрстки.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. В чём разница между блочным и строчным элементом?
   • Блочный не может содержать текст, а строчный может
   • Блочный занимает всю ширину и начинает новую строку, а строчный остаётся в потоке текста
   • Строчный всегда больше блочного
2. Как отцентрировать по горизонтали блочный элемент шириной 300 px?
   • text-align: center; на самом блоке
   • margin: 0 auto; с заданной шириной
   • padding: auto; на блоке
3. Почему width: 200px; по умолчанию никак не влияет на <span>?
   • Потому что span отвергает все свойства CSS
   • Потому что 200 px превышают максимальный размер span
   • Потому что span строчный, а на строчных элементах width игнорируется