Понимание ширины, высоты, внешних и внутренних отступов
Изучите, как width, height, margin и padding определяют размеры и интервалы элементов.
«Понимание ширины, высоты, внешних и внутренних отступов» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Концепция блочной модели
Каждый HTML-элемент отображается как прямоугольный блок. Блочная модель CSS описывает четыре слоя, из которых состоит этот блок, от внутреннего к внешнему: содержимое → внутренний отступ → граница → внешний отступ.
width и height
width и height задают размеры области содержимого. По умолчанию внутренние отступы и граница добавляются к этим размерам.
<div class="box"></div>
padding
padding — это прозрачное пространство внутри границы, между содержимым и краем границы. Оно является частью области элемента, по которой можно щёлкнуть и которая закрашивается фоном.
<div class="card">Card content</div>
Полные записи padding
Каждую сторону можно задать отдельно:
<div class="element">Padded element</div>
margin
margin — это прозрачное пространство снаружи границы. Оно отодвигает другие элементы. Отрицательные внешние отступы приближают элементы друг к другу или накладывают их друг на друга.
<div class="section">Centered section with bottom margin</div>
Схлопывание внешних отступов
Вертикальные внешние отступы схлопываются между соседними блочными элементами: фактический интервал равен большему из двух отступов, а не их сумме. Горизонтальные внешние отступы никогда не схлопываются.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Предотвращение схлопывания внешних отступов
Схлопывание внешних отступов предотвращается, если:
- элементы являются дочерними элементами flex- или grid-контейнера
- у родителя задано
overflow: hidden - между родителем и первым дочерним элементом у родителя задан
padding - соседние элементы разделяет строчный элемент
Внешние отступы auto
Если задать горизонтальные внешние отступы auto для блочного элемента с фиксированной шириной, он будет выровнен по центру контейнера. Это классический способ центрирования.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Ограничивайте размеры минимальными и максимальными пределами, чтобы элементы оставались удобными для чтения на экранах разных размеров:
<div class="content">Readable content column capped at 65 characters wide.</div>
Расчёт полного размера элемента
В модели content-box, используемой по умолчанию, полная ширина = width + padding-left + padding-right + border-left + border-right. Это может привести к неожиданностям, поэтому предпочтительнее использовать border-box.
Логические свойства margin и padding
Современный CSS предлагает логические эквиваленты: margin-block, margin-inline, padding-block-start и другие. Они автоматически адаптируются к направлению письма.
<div class="card">Logical padding-block/inline</div>
Быстрая проверка
Какие слои входят в полную отображаемую ширину блочного элемента в используемой по умолчанию блочной модели?
Итоги
Слои блочной модели — содержимое, внутренний отступ, граница и внешний отступ. Внутренний отступ находится внутри границы, а внешний — снаружи. Вертикальные внешние отступы схлопываются между соседними элементами. Используйте margin: 0 auto с фиксированной шириной, чтобы центрировать блочные элементы.
Часто задаваемые вопросы
Урок «Понимание ширины, высоты, внешних и внутренних отступов» бесплатный?
Да — полный текст урока «Понимание ширины, высоты, внешних и внутренних отступов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Понимание ширины, высоты, внешних и внутренних отступов»?
Изучите, как width, height, margin и padding определяют размеры и интервалы элементов. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Понимание ширины, высоты, внешних и внутренних отступов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Понимание ширины, высоты, внешних и внутренних отступов
- Стили, ширина и цвет границ
- Размер блока: Content-Box и Border-Box
- Контур и тень блока