• Теория
  • Теория

Автоматические внешние отступы

Мы закончили с колонками. Займёмся теперь самим <main>. Согласно макету, основное содержимое должно иметь фиксированную ширину и располагаться по центру страницы:

Макет основного содержимого

В вёрстке часто требуется расположить элемент по центру, или, как говорят разработчики, отцентровать элемент. Существует множество способов это сделать. Мы воспользуемся самым популярным. Для него требуется:

  • указать элементу ширину, которая меньше ширины родительского элемента;
  • задать элементу автоматические внешние отступы справа и слева.

Пойдём по порядку. Нам нужно, чтобы ширина центруемого элемента была меньше ширины родителя. Для тега <main> родительским элементом является <body>, который, будучи блочным боксом, растягивается на всю ширину окна браузера. Выходит, чтобы ширина <main> оказалась меньше ширины родительского элемента, достаточно, чтобы она была меньше ширины окна браузера.

Дальше для выравнивания элемента нужно задать ему отступы. Прежде для указания внешних отступов мы использовали значения в пикселях. Но у margin может быть и другое значение — auto. Например:

margin-left: auto;

Это значение говорит браузеру самому рассчитать размер внешнего отступа. Браузер не жадный, поэтому выделяет под отступ всё свободное пространство в родительском контейнере. Так что если указать автоматический внешний отступ слева, то элемент прижмётся к правой границе родительского элемента.

Если автоматические внешние отступы заданы и справа и слева, то свободное пространство поделится между ними поровну. В итоге элемент расположится прямо по центру.

Схема выравнивания по горизонтали

Итак, теперь мы знаем, как отцентровать основное содержимое. Укажем с помощью свойства width его ширину, а после зададим автоматические отступы справа и слева.

Это удобный трюк, но работает он с оговорками. Во-первых, таким образом не получится выровнять строчные боксы. Во-вторых, в блочном боксе (в отличие от флекс-контейнера) подобным образом можно выровнять элемент только по горизонтали.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Сетки» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.