Свойства поля CSS определяют пространство вокруг элементов.
Поле
Поле очищает область вокруг элементов (вне границ). Поле не имеет цвета фона, и является полностью прозрачным.
Верхнее, правое, нижнее и левое поля могут быть изменены независимо друг от друга с использованием отдельных свойств. Сокращенное свойство поля может также использоваться, чтобы изменить все поля сразу.
Возможные значения
| Значение | Описание |
|---|---|
| auto | Браузер устанавливает поля. Этот результат зависит от браузера |
| length | Определяет фиксированные поля (в пикселях, pt, em, и т.д.) |
| % | Определяет поля в % от содержащего элемента |
Можно использовать отрицательные значения, для перекрытия содержания.
Поля - отдельные стороны
В CSS, можно задать различные поля для разных сторон:
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { background-color:yellow; }
p.margin
{
margin-top:60px;
margin-bottom:60px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>Этот параграф без указания полей.</p>
<p class="margin">Этот параграф с указанными полями.</p>
</body>
</html>
Поля - Краткая форма записи
Для сокращения кода, можно указать все свойства полей в одном свойстве. Это называется краткая форма записи.
Краткая форма записи для всех свойств полей - "margin":
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p { background-color:yellow; }
p.margin { margin:60px 50px; }
</style>
</head>
<body>
<p>Этот параграф без указания полей.</p>
<p class="margin">Этот параграф с указанными полями.</p>
</body>
</html>
Свойство 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
Больше примеров
Пример 3
Этот пример показывает, как установить верхнее поле текста с помощью значения cm.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.ex1 { margin-top:2cm; }
</style>
</head>
<body>
<p>Параграф без указанных полей.</p>
<p class="ex1">Параграф с верхним полем 2cm.</p>
<p>Параграф без указанных полей.</p>
</body>
</html>
Пример 4
Этот пример показывает, как установить нижнее поле текста с помощью значения процентов.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p.bottommargin { margin-bottom:25%; }
</style>
</head>
<body>
<p>Параграф без указанных полей.</p>
<p class="bottommargin">Параграф с указанным нижним полем.</p>
<p>Параграф без указанных полей.</p>
</body>
</html>
Все свойства полей CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| margin | Сокращеная форма свойства для настройки свойств полей в одной декларации | margin-top margin-right margin-bottom margin-left |
1 |
| margin-bottom | Устанавливает нижнее поле элемента | auto length % |
1 |
| margin-left | Устанавливает левое поле элемента | auto length % |
1 |
| margin-right | Устанавливает правое поле элемента | auto length % |
1 |
| margin-top | Устанавливает верхнее поле элемента | auto length % |
1 |
Была ли эта информация полезной?
