Синтаксис
margin: [значение | проценты | auto] {1,4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
| Число значений |
Результат |
| 1 |
Отступы будут установлены одновременно от каждого края элемента. |
| 2 |
Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого. |
| 3 |
Первое значение задает отступ от верхнего края, второе — одновременно
от левого и правого края, а третье — от нижнего края. |
| 4 |
Поочередно устанавливается отступ от верхнего, правого, нижнего и левого
края. |
Величину отступов можно указывать в пикселах (px), процентах (%) или других
допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным
числом.
- auto
- Указывает, что размер отступов будет автоматически рассчитан браузером.
- inherit
- Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>margin</title>
<style type="text/css">
BODY {
margin: 0; /* Убираем отступы */
}
DIV.parent {
margin: 20%; /* Отступы вокруг элемента */
background: #fd0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
DIV.child {
border: 3px solid #666; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin: 10px; /* Отступы вокруг */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin
Объектная модель
[window.]document.getElementById("elementID").style.margin
|
