|
CSS Урок 14 Поля
CSS свойства полей определяют пространство вокруг элементов.
Поля
Поле очищает пространство вокруг элемента (за пределами границы). Поля не имеет
цвета фона и является полностью прозрачным.
Верхнее (top), правое (right), нижнее (bottom) и левое (left) поля могут изменяться
независимо, используя различные свойства. Стенографическое свойство полей (margin) также может быть полезно,
чтобы изменить все поля одновременно.
Возможные Значения
| Значение |
Описание |
| auto |
Браузер устанавливает поля.
Результат этого значения зависит от браузера |
| длина |
Определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.) |
| % |
Определяет поле в % от содержащего элемента |
 Можно использовать отрицательные значения, чтобы частично перекрыть содержание.
Поля - Индивидуальные Значения для СторонВ CSS можно указывать различные поля для разных сторон:
Примерmargin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Поля - Стенографическое СвойствоЧтобы сократить код, можно указать все свойства полей в одном свойстве.
оно называется стенографическим свойством.
Стенографическое свойство ждя все свойств полей - "margin":
Пример
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Свойство margin может иметь от одного до четырех значений.
- margin:25px 50px 75px 100px;
- верхнее поле равно 25px
- правое поле равно 50px
- нижнее поле равно 75px
- левое поле равно 100px
- margin:25px 50px 75px;
- верхнее поле равно 25px
- правое и левое поля равны по 50px
- нижнее поле равно 75px
- margin:25px 50px;
- верхнее и нижнее поля равны по 25px
- правое и левое поля равны по 50px
- margin:25px;
- все четыре поля равны по 25px
 |
Примеры |
Установить верхнее поле текста, используя значения в cm
Этот пример демонстрирует как установить верхнее поле текста, используя значения в cm.
Установить нижнее поле текста, используя значения в %
Этот пример демонстрирует как установить нижнее в % относительно ширины элемента-контейнера
Все CSS Свойства Полей| Свойство | Описание |
|---|
| margin | Стенографическое свойство для установки свойств полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Устанавливает левое поле элемента |
| margin-right | Устанавливает правое поле элемента |
| margin-top | Устанавливает верхнее поле элемента |
|
