СSS Свойство margin
Пример
Установить поля для всех четырех сторон элемент <p> по 35 пикселей:
p {
margin: 35px;
}
Попробуйте сами »
Определение и использование
Свойство margin устанавливает поля для элемента, и это сокращенное свойство для следующих свойств:
Если свойство margin имеет четыре значения:
- margin: 10px 5px 15px 20px;
- верхнее поле 10px
- правое поле 5px
- нижнее поле 15px
- левое поле 20px
Если свойство margin имеет три значения:
- margin: 10px 5px 15px;
- верхнее поле 10px
- правый и левый поля 5px
- нижнее поле 15px
Если свойство margin имеет два значения:
- margin: 10px 5px;
- верхнее и нижнее поля 10px
- правое и левое поля 5px
Если свойство margin имеет одно значение:
- margin: 10px;
- все четыре поля 10px
Примечание: Допускаются отрицательные значения.
| Значение по умолчанию: | 0 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да, смотреть индивидуальные свойства. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.margin="100px 50px" Попробовать |
Поддержка браузеров
Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
CSS Синтаксис
margin: length|auto|initial|inherit;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| length | Задает поля в px, pt, cm, и т.д. Значение по умолчанию 0. Допускаются отрицательные значения. Прочитать о Eдиницы длины | Воспроизвести » |
| % | Задает поля в процентах от ширины содержащего элемент | Воспроизвести » |
| auto | Свойство браузер вычисляет поля | Воспроизвести » |
| initial | Устанавливает это свойство в значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Крах полей
Верхнее и нижнее поля элементов иногда происходит (крах) получается единое поле, равная по величине из двух полей.
Этого не происходит на горизонтальных (левого и правого) полях! Только вертикальных (верхнего и нижнего) полях!
Посмотрите на следующий пример:
В примере выше, элемент <p class="a"> имеет верхние и нижние поля в 30 пикселей. Элемент <p class="b"> имеет верхние и нижние поля в 20px.
Это означает, что вертикальные поля между <p class="a"> и <p class="b"> должно быть 50 пикселей (30 пикселей + 20 пикселей). Но в связи с распадом полей фактическая маржа заканчивается 30 пикселей!
Примеры
Пример
Установить поля для элемента <p> до 35 пикселей сверху и снизу, и на 70 пикселей для правого и левого:
p {
margin: 35px 70px;
}
Попробуйте сами »
Пример
Установка полей для элемента <p> до 35 пикселей для верхней, 70 пикселей для правого и левого, и в 50 пикселей для нижней:
p {
margin: 35px 70px 50px;
}
Попробуйте сами »
Пример
Установка полей для <p> элемент до 35 пикселей для верхней, 70 пикселей для правого, 50 пикселей снизу и до 90 пикселей для левой:
p {
margin: 35px 70px 50px 90px;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Поля
CSS Учебник: CSS Бокс модель
HTML DOM Справочник: Свойство margin
