Дизайн HTML-страниц. Язык CSS (ч.5)

Сегодня поговорим о свойствах блоков, а точнее о их позиционировании.

text-align: left | center | right; - выравнивает все дочерние блоки по левому краю или по центру или по правому соответственно.

То есть например у вас есть один <div> блок, которому вы присвоите класс с параметром выравнивания по центру. Тогда все блоки, которые будут внутри данного div'а будут выровнены по центру.

margin-top: 15px; - отступ текущего блока на 15 пикселей от верхнего блока.

margin-right: 15px; - от правого блока

margin-bottom: 15px; - от нижнего

margin-left: 15px; - от левого

Чтобы легче это всё понять, приведу пример:

Тут я добавил три div-блока с классом "block" и больше ничего.

Класс "блок" я описал так:

То есть высота 100 пикселей, ширина тоже сто пикселей, цвет фона - синий.

Посмотрим в браузере что получилось:

Затем на структуру блоков на нашем сайте можно посмотреть через консоль в браузере. Вызвать её можно нажатием клавиш Ctrl+Shift+C. Или правой кнопкой мыши -> Просмотреть код (В Chrome так, в других браузерах может быть по другому)

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

Итак, у нас есть три блока 100 на 100 пикселей.

Сделаем каждому отступ сверху по 15 пикселей.

В описании класса "block" я добавил параметр margin-top: 15px;

Что получилось:

Теперь у каждого блока есть отступ от верхнего элемента на 15 пикселей. Как это можно понять: Рыжей полоской подсвечивается то, сколько отведено под выделенный блок. Например я навел курсор на первый блок и понял, что от верха есть какой-то отступ.

Сколько именно отступ можно посмотреть тут.

Такая схема расположена во вкладке Computed в консоли браузера:

Напомню, я работаю в хроме, в других браузерах что-то может отличаться. Советую вам тоже перейти в хром, чтобы мы работали в одинаковых браузерах.

Теперь я могу добавить отступ слева: margin-left: 20px;

Вот что показано на схеме:

На странице все блоки сдвинулись влево на 20 пикселей каждый.

Как сократить запись отступов, чтобы не писать все четыре параметра в четыре строки?

Существует еще такая форма:

margin: 1px 2px 3px 4px;

Вы задаете сразу четыре отступа, тут первое число отвечает за отступ сверху, второе - за отступ справа, третье - за отступ снизу, четвертое - за отступ слева.

Чтобы это заучить, достаточно запомнить то что первое число отвечает за отступ сверху, а все остальные идут по часовой стрелке.

С внешними отступами разобрались. Теперь нам надо изучить еще отступы изнутри блока и общую верстку страницы

@honey_and_money - Если ничего не менять сегодня, то ничего не изменится и через 10 лет