- Теория
- Теория
Автоматические внешние отступы
Мы закончили с колонками. Займёмся теперь самим <main>. Согласно макету, основное содержимое должно иметь фиксированную ширину и располагаться по центру страницы:
В вёрстке часто требуется расположить элемент по центру, или, как говорят разработчики, отцентровать элемент. Существует множество способов это сделать. Мы воспользуемся самым популярным. Для него требуется:
- указать элементу ширину, которая меньше ширины родительского элемента;
- задать элементу автоматические внешние отступы справа и слева.
Пойдём по порядку. Нам нужно, чтобы ширина центруемого элемента была меньше ширины родителя. Для тега <main> родительским элементом является <body>, который, будучи блочным боксом, растягивается на всю ширину окна браузера. Выходит, чтобы ширина <main> оказалась меньше ширины родительского элемента, достаточно, чтобы она была меньше ширины окна браузера.
Дальше для выравнивания элемента нужно задать ему отступы. Прежде для указания внешних отступов мы использовали значения в пикселях. Но у margin может быть и другое значение — auto. Например:
margin-left: auto;Это значение говорит браузеру самому рассчитать размер внешнего отступа. Браузер не жадный, поэтому выделяет под отступ всё свободное пространство в родительском контейнере. Так что если указать автоматический внешний отступ слева, то элемент прижмётся к правой границе родительского элемента.
Если автоматические внешние отступы заданы и справа и слева, то свободное пространство поделится между ними поровну. В итоге элемент расположится прямо по центру.
Итак, теперь мы знаем, как отцентровать основное содержимое. Укажем с помощью свойства width его ширину, а после зададим автоматические отступы справа и слева.
Это удобный трюк, но работает он с оговорками. Во-первых, таким образом не получится выровнять строчные боксы. Во-вторых, в блочном боксе (в отличие от флекс-контейнера) подобным образом можно выровнять элемент только по горизонтали.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
