Margins

优质

小牛编辑

128浏览

2023-12-01

margin属性定义HTML元素周围的空间。可以使用负值来重叠内容。

margin元素的值不会被子元素继承。请记住，相邻的垂直边距（顶部和底部边距）将相互折叠，使得块之间的距离不是边距的总和，而是仅两个边距中的较大者或与一个边距相同的尺寸（如果两者都是等于。

我们有以下属性来设置元素边距。

margin指定了一个简写属性，用于在一个声明中设置保证金属性。
margin-bottom指定元素的下边距。
margin-top指定元素的上边距。
margin-left指定元素的左边距。
margin-right指定元素的右边距。

现在，我们将看到如何将这些属性与示例一起使用。

保证金财产

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属性允许您设置元素的下边距。它可以有一个长度值，％或auto。

这是一个例子 -

<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属性允许您设置元素的上边距。它可以有一个长度值，％或auto。

这是一个例子 -

<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属性允许您设置元素的左边距。它可以有一个长度值，％或auto。

这是一个例子 -

<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属性允许您设置元素的右边距。它可以有一个长度值，％或auto。

这是一个例子 -

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