Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 15 Отступы


« Назад Далее »

CSS свойства отступов (padding) определяют пространство между границей элемента и содержимым элемента.


Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Значение Описание
длина Определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)
% Определяет отступ в % от элемента-контейнера


Отступы - Индивидуальные значения для сторон

В CSS можно указать различные отступы для разных сторон:

Пример

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Отступы - Стенографическое (сокращенное) свойство

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством.

Стенографическое свойство для указания всех свойств отступов - "padding":

Пример

padding:25px 50px;

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Свойство padding может иметь от одного до четырех значений.

  • padding:25px 50px 75px 100px;
    • верхний отступ 25px
    • правый отступ 50px
    • нижний отступ 75px
    • левый отступ 100px

  • padding:25px 50px 75px;
    • верхний отступ 25px
    • правый и левый отступы по 50px
    • нижний отступ 75px

  • padding:25px 50px;
    • верхний и нижний отступы по 25px
    • правый и левый отступы по 50px

  • padding:25px;
    • все четыре отступа по 25px

Примеры

Еще Примеры

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

Установить левый отступ
Этот пример демонстрирует как установить левый отступ элемента.

Установить правый отступ
Этот пример демонстрирует как установить правый отступ элемента.

Установить верхний отступ
Этот пример демонстрирует как установить верхний отступ элемента.

Установить нижний отступ
Этот пример демонстрирует как установить нижний отступ элемента.


Все CSS Свойства Отступов

СвойствоОписание
paddingСтенографическое свойство для установки свойств отступов в одном объявлении
padding-bottomУстановка нижнего отступа элемента
padding-leftУстановка левого отступа элемента
padding-rightУстановка правого отступа элемента
padding-topУстановка верхнего отступа элемента




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru