CSS margin Свойство
Пример
Установите поле для всех четырех сторон элемента <p> до 35 пикселей:
p {
margin: 35px;
}
Подробнее примеры ниже.
Определение и использование
Свойство margin
задает поля для элемента и является сокращенным свойством для следующих свойств:
Если свойство Margin имеет четыре значения:
- margin: 10px 5px 15px 20px;
- top margin is 10px
- right margin is 5px
- bottom margin is 15px
- left margin is 20px
Если свойство Margin имеет три значения:
- margin: 10px 5px 15px;
- top margin is 10px
- right and left margins are 5px
- bottom margin is 15px
Если свойство Margin имеет два значения:
- margin: 10px 5px;
- top and bottom margins are 10px
- right and left margins are 5px
Если свойство Margin имеет одно значение:
- margin: 10px;
- all four margins are 10px
Примечание: Допустимы отрицательные значения.
Значение по умолчанию: | 0 |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Читайте о animatable |
Version: | 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 | Задает поле в пикселах, PT, cm и т.д. Значение по умолчанию — 0. Допустимы отрицательные значения. Читать о единицах длины | |
% | Задает поле в процентах от ширины содержащего элемента | |
auto | Обозреватель вычисляет поле | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Свернуть маржи
Верхние и нижние поля элементов иногда сворачиваются в одно поле, равное самому большому из двух полей.
Это происходит не на горизонтальных (левых и правых) полях! Только вертикальные (верхние и нижние) поля!
Посмотрите на следующий пример:
Пример
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
В приведенном выше примере элемент < p class = «a» > имеет верхний и нижний пределы 30px. Элемент < p class = "b" > имеет верхний и нижний пределы 20px.
Это означает, что вертикальное поле между < p class = "а" > и < p class = "b" > должно быть 50px (30px + 20px). Но из-за краха маржи, фактические маржа заканчивается время 30px!
Другие примеры
Пример
Установите поле для элемента <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 Margin
CSS Справочник: CSS Box Model
HTML DOM Справочник: margin Свойство