CSS Margin Свойства
В CSS margin свойства используются для создания пространства вокруг элементов.
В margin свойства устанавливают размер пустого пространства снаружи границы.
Этот элемент имеет margin по 80px.
CSS Margins
В CSS margin свойства устанавливают размер пустого пространства снаружи границы.
 | Примечание: margins являются полностью прозрачными - и не может иметь цвет фона! |
|---|
С помощью CSS, вы имеете полный контроль над margins . Есть свойства CSS для установки margin для каждой стороны элемента (сверху, справа, снизу и слева).
Margin - Отдельные Стороны
CSS имеет свойства для указания margin для каждой стороны элемента:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Все margin свойства могут иметь следующие значения:
- auto - браузер вычисляет margin
- длина - определяет margin в px, pt, cm и т.д.
- % - Задает margin в% от ширины содержащего элемента
- унаследовать - указывает , что margin должен быть унаследован от родительского элемента
| Примечание: Кроме того , можно использовать отрицательные значения для margins ;чтобы перекрывать содержимое. |
|---|
Следующий пример устанавливает различные margins для всех четырех сторон <p> элемента:
пример
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
} Попробуй сам " Следующий пример позволяет левый margin быть унаследован от родительского элемента:
пример
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left:
inherit;
} Попробуй сам " Margin - сокращённое свойство
Чтобы сократить код, можно указать все margin свойства в одном собственности.
margin свойство свойство является обобщающим для следующих индивидуальных margin свойств:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Итак, вот как это работает:
Если margin свойство имеет четыре значения:
- margin : 25px 50px 75px 100px;
- верхнее поле 25px
- правое поле 50px
- нижнее поле составляет 75px
- левое поле является 100px
Если margin свойство имеет три значения:
- margin : 25px 50px 75px;
- верхнее поле 25px
- правое и левое поля являются 50px
- нижнее поле составляет 75px
Если margin свойство имеет два значения:
- margin : 25px 50px;
- верхнее и нижнее поля являются 25px
- правое и левое поля являются 50px
Если margin свойство имеет одно значение:
- margin : 25px;
- все четыре поля являются 25px
Использование The Автозначением
Вы можете установить margin свойство auto горизонтально центрировать элемент внутри контейнера.
Элемент будет занимать указанную ширину, а остальное пространство будет разделено поровну между левым и правым margins :
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Все свойства CSS Маржа
| Имущество | Описание |
|---|---|
| margin | Сокращённое свойство для установки margin свойств в одной декларации |
| margin-bottom | Устанавливает нижний margin элемента |
| margin-left | Устанавливает левый margin элемента |
| margin-right | Устанавливает правый margin элемента |
| margin-top | Устанавливает верхний margin элемента |