The box model · Модель блока
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
Русский
У каждого блока есть слои
- CSS рассматривает каждый элемент как блок.
- Контент — это ваш текст или изображение. Внутренние отступы (padding) — это пространство внутри, вокруг контента.
- Border — это линия вокруг отступа. Margin (внешний отступ) — это пространство снаружи, которое отодвигает другие блоки.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
Русский
Отступ и рамка
padding: 20px;добавляет 20 пикселей пространства внутри со всех четырёх сторон.border: 2px solid black;рисует линию: сначала её ширину, затем стиль, а потом цвет.- Padding делает блок просторным; border выделяет его.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
Русский
Распространенные ошибки
- Модель прямоугольника: содержимое, затем отступы, затем рамка, затем внешние отступы (изнутри наружу).
- Padding добавляет пространство внутри рамки.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
Русский
Теперь попробуйте сами
- Padding находится внутри; рамка окружает его.
- Добавьте padding к блоку, затем border.
Explore · Исследовать
The CSS box model · CSS модель блока
Every box is content + padding + border + margin around it. · Каждый блок состоит из контента + отступов (padding) + рамки (border) + внешних отступов (margin) вокруг него.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · Добавьте отступы внутри блока. Добавьте padding: 20px; в правило .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · Нарисуйте рамку вокруг блока. Добавьте border: 2px solid navy; в правило .box — сохраните три части в этом порядке: ширина, стиль, цвет.