76 lines
3.8 KiB
Markdown
76 lines
3.8 KiB
Markdown
---
|
||
title: Margin Property
|
||
localeTitle: Маржинальная собственность
|
||
---
|
||
## Маржинальная собственность
|
||
|
||
Свойство margin - это пространство вокруг элемента, а не padding, которое является пространством внутри элемента. Поля прозрачны и являются самым внешним элементом в модели Box (см. Диаграмму ниже).
|
||
|
||
|
||
|
||
Источник: https://css-tricks.com/the-css-box-model/
|
||
|
||
### Настройка маржи
|
||
|
||
Существует несколько способов задания поля элемента.
|
||
|
||
Простой способ ...
|
||
|
||
```css
|
||
margin: 10px;
|
||
```
|
||
|
||
Это положит 10 пикселей пространства вокруг элемента.
|
||
|
||
Вы также можете поместить различное количество места на каждой стороне элемента. Например:
|
||
|
||
```css
|
||
margin-top: 10px;
|
||
margin-bottom: 15px;
|
||
margin-left: 20px;
|
||
margin-right: 25px;
|
||
```
|
||
|
||
Однако при определении разных сторон элемента можно использовать стенографию. Он начинается сверху и идет по часовой стрелке вокруг элемента (сверху, справа, внизу, слева). Например, код будет записан в shorhand следующим образом:
|
||
|
||
```css
|
||
margin: 10px 25px 15px 25px;
|
||
```
|
||
|
||
Кроме того, если нижнее и верхнее поля одинаковы, а левое и правое поля одинаковы, их можно записать так:
|
||
|
||
```css
|
||
margin: 10px 20px;
|
||
```
|
||
|
||
где верхний и нижний поля составляют 10 пикселей, а левое и правое поля - 20 пикселей.
|
||
|
||
### Другие значения свойств
|
||
|
||
auto - браузер вычисляет поля.
|
||
|
||
initial - установить свойство в его начальное значение
|
||
|
||
inherit - элемент наследует маржу от своего родительского элемента
|
||
|
||
### Измерение пространства
|
||
|
||
Так же, как есть несколько способов настройки поля, есть также несколько способов измерения поля.
|
||
|
||
px - Измерение в пикселях, стандартная единица измерения пространства экрана.
|
||
|
||
% - Процент экрана. Это заставит элемент сжиматься и расти с помощью браузера и является одним из рекомендуемых единиц измерения для гибкого веб-дизайна.
|
||
|
||
em - размер относительно размера шрифта текущего элемента.
|
||
|
||
единица измерения размера относительно размера шрифта корневого элемента страницы.
|
||
|
||
[Вот](https://www.w3schools.com/CSSref/css_units.asp) руководство по единицам CSS.
|
||
|
||
[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [W3 Школы](https://www.w3schools.com/CSSref/pr_margin.asp)
|
||
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
|
||
* [Трюки CSS](https://css-tricks.com/almanac/properties/m/margin/) |