Свойство margin определяет пространство вокруг элемента HTML. Для перекрытия содержимого можно использовать отрицательные значения.
Значения свойства margin не наследуются дочерними элементами. Помните, что смежные вертикальные поля (верхнее и нижнее поля) будут разрушаться друг с другом, так что расстояние между блоками не является суммой полей, а только большее из двух полей или того же размера, что и одно поле, если оба равны.
У нас есть следующие свойства для установки поля элемента.
- margin специфицирует сокращённое свойство для установки свойств полей в одной декларации.
- margin-bottom определяет нижнюю границу элемента.
- margin-top определяет верхний край элемента.
- margin-left задано левое поле элемента.
- margin-right определяет правую границу элемента.
Теперь посмотрим, как использовать эти свойства с примерами.
Свойство Margin
Свойство 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
Свойство margin-bottom позволяет установить нижнее поле элемента. Он может иметь значение по длине, % или авто.
Вот пример -
< 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
Свойство margin-top позволяет установить верхний край элемента. Он может иметь значение по длине, % или авто.
Вот пример -
< 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
Свойство margin-left позволяет вам установить левое поле элемента. Он может иметь значение по длине, % или авто.
Вот пример:
< 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
Свойство margin-right позволяет вам установить правый край элемента. Он может иметь значение по длине, % или авто.
Вот пример -
< 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>
Это приведет к следующему результату -
