ГРУППА КУРСА
|
Главная >
Учебник CSS >
Внешние и внутренние отступы в CSSВ CSS есть два вида отступов - внешние и внутренние. Внутренние отступы - это расстояние от края контента до рамки блока. А внешние отступы - это расстояние от рамки блока до соседнего блока или до края страницы. Если рамки нет, то расстояние определяется от предполагаемой рамки. Для создания внешних отступов в CSS используется свойство margin, а для создания внутренних - свойство padding. В значениях этих свойств указывается расстояние в единицах, доступных в CSS. Создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока. Стиль: +
HTML код:
Обратите внимание - второй блок, которому не установлены отступы, не касается краёв страницы, а находится от них на определённом расстоянии. Это происходит потому, что у тега <body> есть внутренние отступы. Их можно отменить, то есть, сделать равными нулю, как и у любого элемента. ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей. Отступы можно установить с каждой стороны по-отдельности. Для установки внешних отступов используются свойства margin-left, margin-right, margin-top, margin-bottom, а для внутренних отступов padding-left, padding-right, padding-top, padding-bottom. Добавим на страницу блок и установим ему внутренние отступы сверху и слева:
Попробуйте установить блоку различные внутренние и внешние отступы, посмотрите, как они работают. Если нужно указать разные отступы со всех четырёх сторон, то это можно сделать более коротким способом. Для этого свойствам margin и padding указываются четыре значения через пробел:
Если какой-то отсуп не нужен, то ему можно указать нулевое значение. Пример:
|