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

В тренажёре «Знакомство с HTML и CSS» мы познакомились со многими тегами. Каждому из этих тегов на странице соответствует прямоугольная область, которая называется боксом (от английского box — «коробка»).

Бокс состоит из содержимого (content), внутренних отступов (padding), рамки (border) и внешних отступов (margin):

То, как бокс выглядит на странице, во многом зависит от его типа (или от типа его родителя). С боксами двух типов — блочными и строчными — мы уже работали в тренажёре «Знакомство с HTML и CSS», хоть и не упоминали их типы.

Блочные боксы на странице начинаются с новой строки и растягиваются на всю ширину родительского элемента. Блочный тип по умолчанию имеют, например, теги <p>, <div> и <h1>.

Строчные боксы располагаются друг за другом на одной строке, а их ширина зависит от их содержимого. По умолчанию строчными боксами являются, например, теги <a>, <span> и <b>.

Хорошему верстальщику нужно уметь видеть боксы на странице. Потренируем этот навык. Подключим специальный стилевой файл для подсветки боксов, а после добавим на страницу новые боксы разных типов.