Учебники

CSS — поля

Сентябрь 21, 2018

Свойство margin определяет пространство вокруг элемента HTML. Можно использовать отрицательные значения для перекрытия контента.

Значения свойства margin не наследуются дочерними элементами. Помните, что смежные вертикальные поля (верхний и нижний поля) будут сжиматься друг в друга, так что расстояние между блоками — это не сумма полей, а только большее из двух полей или тот же размер, что и у одного поля, если оба равны.

У нас есть следующие свойства для установки поля элемента.

  • Поля определяют сокращенное свойство для установки свойств полей в одной декларации.

  • Поле margin-bottom указывает нижнее поле элемента.

  • Поле margin-top определяет верхнее поле элемента.

  • Поле слева указывает поле слева элемента.

  • Поле margin-right указывает правое поле элемента.

Поля определяют сокращенное свойство для установки свойств полей в одной декларации.

Поле margin-bottom указывает нижнее поле элемента.

Поле margin-top определяет верхнее поле элемента.

Поле слева указывает поле слева элемента.

Поле margin-right указывает правое поле элемента.

Теперь мы увидим, как использовать эти свойства на примерах.

Маржинальная собственность

Свойство margin позволяет вам установить все свойства для четырех полей в одной декларации. Вот синтаксис для установки поля вокруг абзаца —

Вот пример —

Live Demo

<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>

Это даст следующий результат —

40
Share: