Свойство margin определяет пространство вокруг элемента HTML. Можно использовать отрицательные значения для перекрытия контента.
Значения свойства margin не наследуются дочерними элементами. Помните, что смежные вертикальные поля (верхний и нижний поля) будут сжиматься друг в друга, так что расстояние между блоками — это не сумма полей, а только большее из двух полей или тот же размер, что и у одного поля, если оба равны.
У нас есть следующие свойства для установки поля элемента.
Поля определяют сокращенное свойство для установки свойств полей в одной декларации.
Поле margin-bottom указывает нижнее поле элемента.
Поле margin-top определяет верхнее поле элемента.
Поле слева указывает поле слева элемента.
Поле margin-right указывает правое поле элемента.
Поля определяют сокращенное свойство для установки свойств полей в одной декларации.
Поле margin-bottom указывает нижнее поле элемента.
Поле margin-top определяет верхнее поле элемента.
Поле слева указывает поле слева элемента.
Поле margin-right указывает правое поле элемента.
Теперь мы увидим, как использовать эти свойства на примерах.
Маржинальная собственность
Свойство margin позволяет вам установить все свойства для четырех полей в одной декларации. Вот синтаксис для установки поля вокруг абзаца —
Вот пример —
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>
Это даст следующий результат —
Свойство нижнего края
Свойство margin-bottom позволяет вам установить нижнее поле элемента. Может иметь значение длины,% или авто.
Вот пример —
Live Demo
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>
Это даст следующий результат —
Недвижимость на полях
Свойство margin-top позволяет установить верхнее поле элемента. Может иметь значение длины,% или авто.
Вот пример —
Live Demo
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>
Это даст следующий результат —
Свойство оставленное на полях
Свойство margin-left позволяет установить левое поле элемента. Может иметь значение длины,% или авто.
Вот пример —
Live Demo
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>
Это даст следующий результат —
Недвижимость с правом наценки
Свойство margin-right позволяет вам установить правое поле элемента. Может иметь значение длины,% или авто.
Вот пример —
Live Demo
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>