| Vitalya | Дата: Вторник, 24-Января-2017, 18:41:51 | Сообщение # 1 |
 Генерал_палкомник
Группа: Администраторы
Сообщений: 114
Награды: 0
Репутация: 32767
Статус: Offline
| Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.
На рисунке ниже наглядно представлены параметры отступов блоков:
Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — В уроке используются пиксели.
Внутренние отступы блоков
За внутренние отступы в CSS отвечает свойство padding. Итак, давайте рассмотрим пример задания внутренних отступов у блока:
Код padding-top: 5px; /*верхний внутренний отступ*/
padding-left: 8px; /*левый внутренний отступ*/
padding-right: 8px; /*правый внутренний отступ*/
padding-bottom: 5px; /*нижний внутренний отступ*/
В данном примере внутренние отступы задаются отдельно для каждой стороны блока. Кроме этого, существует несколько способов задания отступов в CSS:
Код margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/
margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/
margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/
margin: 7px; /*описывает все внутренние отступы по 7px*/
Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) — величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.
Внешние отступы блоков
За внешние отступы в CSS отвечает свойство margin. Примеры внешних отступов в CSS:
Пример 1.
Код margin-top: 5px; /*верхний внешний отступ*/
margin-left: 10px; /*левый внешний отступ*/
margin-right: 10px; /*правый внешний отступ*/
margin-bottom: 5px; /*нижний внешний отступ*/
Пример 2.
Код padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/
padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/
padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/
padding: 7px; /*описывает все внешние отступы по 7px*/
Таким образом, как сделать отступы в CSS — вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать. Вот, пожалуй, и все.
|
| |
| |
