Свойство MARGIN

Браузер Internet Explorer Firefox Mozilla Opera Netscape Safari
Версия 5.5 6.0 7.0 1.0 2.0 1.7 7.0 8.0 9.0 6.0 7.0 8.0 1.0
Поддержка Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается Поддерживается

Краткая информация

CSS CSS1
Значение по умолчанию Нет
Наследование Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin

Описание

Задает величину отступа от каждого края элемента. Отступом - это пространство от границы данного элемента до внутренней границы его родительского элемента.

Аргументы

Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Таблица 1. Зависимость от числа аргументов
Число аргументов Результат
1 Отступы будут установлены для всех сторон элемента.
2 Первый аргумент задает отступ от верхнего и нижнего края, второй аргумент - от левого и правого.
3 Первый аргумент задает отступ от верхнего края, второй - одновременно от левого и правого края, а третий - от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

Валидный HTML
Валидный CSS
<!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=windows-1251">
<title>margin</title>
<style type="text/css">
BODY {
 margin: 0px; /* Убираем отступы */
}

DIV.parent {
 margin: 20%; /* Отступы вокруг элемента */
 background: #eee; /* Цвет фона */
 padding: 10px; /* Поля вокруг текста */
}

DIV.child {
 border: 1px dashed #fc0; /* Параметры рамки */
 padding: 5px; /* Поля вокруг текста */
 margin: 5px; /* Отступы вокруг */
}
</style>
</head>
<body>

<div class="parent">
<div class="child">
Американские ученые доказали, что многофенолы, содержащиеся в виноградной кожице и семенах, эффективны в борьбе с воздействием на зубы бактерий и инфекций и положительно влияют на здоровье полости рта. (http://glnews.ru/)
</div>
</div>

</body>
</html>

Комментарий