Компьютерапия

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

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

Смотреть пример