|
CSS Урок 15 Отступы
CSS свойства отступов (padding) определяют пространство между границей элемента и содержимым элемента.
Отступы
Оступы создают пространство вокруг содержания (внутри границы) элемента.
На отступы влияет цвет фона элемента.
Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут
быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все
отступы одновременно.
Возможные Значения
| Значение |
Описание |
| длина |
Определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.) |
| % |
Определяет отступ в % от элемента-контейнера |
Отступы - Индивидуальные значения для сторонВ CSS можно указать различные отступы для разных сторон:
Примерpadding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Отступы - Стенографическое (сокращенное) свойствоЧтобы укоротить код, можно указать все свойства отступов в одном свойстве.
Оно называется стенографическим (сокращенным) свойством.
Стенографическое свойство для указания всех свойств отступов - "padding":
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Свойство 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 | Установка верхнего отступа элемента |
|
