УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

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:100px 50px;

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

Свойство 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Устанавливает верхнее поле элемента




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



© 2011 - 2022 Уроки CSS