Свойство 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>

Это приведет к следующему результату -



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok