Width and centering · Ширина и центрирование
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
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
Русский
Ширина
- По умолчанию блочный блок имеет ширину во всю страницу.
width: 300px;делает его фиксированной ширины.max-width: 600px;более гибкий — максимум такой ширины, но уменьшается на маленьких экранах.
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
Русский
Центрирование блока
- Чтобы отцентрировать блок (а не только текст), задайте ему ширину, затем
margin: 0 auto;. 0 autoозначает отсутствие верхнего/нижнего margin и равные левый/правый margins.- Равные боковые отступы центрируют блок.
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
Русский
Распространенные ошибки
- Отцентрируйте блочный элемент с заданной шириной с помощью
margin: 0 auto. - Ширина в
%относительна по отношению к родительскому элементу.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
Русский
Теперь попробуйте сами
- Блок должен иметь ширину, прежде чем
margin: 0 auto;сможет его отцентрировать. - Задайте ширину, затем отцентрируйте карточку.
Explore · Исследовать
Width and the box · Ширина и блок
Width sets the content size; padding/border/margin add around it. · Ширина задает размер контента; padding/border/margin добавляются вокруг него.
Give the card a fixed width. Add width: 300px; to the .card rule. · Придайте карточке фиксированную ширину. Добавьте width: 300px; в правило .card.
Center the card on the page. Add margin: 0 auto; to the .card rule. · Центрируйте карточку на странице. Добавьте margin: 0 auto; в правило .card.