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

Поля в CSS

Категория: Основы CSS
Просмотров: 1323

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

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





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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok