Spacing — margin and padding · Отступы — margin и padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
Русский
Пространство между блоками
- Margin — это пространство снаружи блока, то есть зазор до соседних элементов.
margin: 30px;добавляет 30 пикселей со всех четырёх сторон снаружи рамки.- Padding сдвигает содержимое внутрь; margin отодвигает другие блоки.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
Русский
Отступ для каждой стороны отдельно
- Вы можете задать отступ только для одной стороны:
margin-top,margin-right,margin-bottom,margin-left. - То же самое работает и для padding:
padding-left: 10px;, и так далее. margin-bottomпод заголовком аккуратно отделяет его от текста.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
Русский
Распространенные ошибки
- Padding находится внутри рамки; margin — это пространство снаружи неё.
box-sizing: border-boxвключает в ширину padding и border.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
Русский
Теперь попробуйте сами
- Margin — это зазор между блоками; padding — это пространство внутри одного блока.
- Добавьте margin вокруг блока, затем отступ под заголовком.
Explore · Исследовать
margin vs padding · margin против padding
Padding is space inside the border; margin is space outside. · Padding — это пространство внутри рамки; margin — это пространство снаружи.
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · Раздвиньте блоки друг от друга. Добавьте margin: 30px; в правило .box.
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · Добавьте отступ только под заголовком. Добавьте h1 { margin-bottom: 24px; }.