CSS - Margins
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>
它会产生以下结果 -
新页面打开
<上一篇.CSS - Borders
CSS - Lists.下一篇>
