📅  最后修改于: 2020-10-26 04:46:32             🧑  作者: Mango
margin属性定义HTML元素周围的空间。可以使用负值来重叠内容。
margin属性的值不由子元素继承。请记住,相邻的垂直边距(顶部和底部边距)将相互折叠,以使块之间的距离不是边距的总和,而仅是两个边距中的较大者或与一个边距相同的大小(如果两者均是)等于。
我们具有以下属性来设置元素边距。
边距指定一种简写属性,用于在一个声明中设置边距属性。
的边距指定元素的底部边缘。
上边距指定元素的上边距。
的利润率左指定元素的左边距。
与容限权限指定元素的右边距。
现在,我们将通过示例了解如何使用这些属性。
margin属性允许您在一个声明中为四个margin设置所有属性。这是在段落周围设置边距的语法-
这是一个例子-
all four margins will be 15px
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
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
它将产生以下结果-
margin-bottom属性允许您设置元素的底边距。它的长度值可以是%或auto。
这是一个例子-
This is a paragraph with a specified bottom margin
This is another paragraph with a specified bottom margin in percent
它将产生以下结果-
margin-top属性允许您设置元素的顶部空白。它的长度值可以是%或auto。
这是一个例子-
This is a paragraph with a specified top margin
This is another paragraph with a specified top margin in percent
它将产生以下结果-
margin-left属性允许您设置元素的左边距。它的长度值可以是%或auto。
这是一个例子-
This is a paragraph with a specified left margin
This is another paragraph with a specified top margin in percent
它将产生以下结果-
margin-right属性允许您设置元素的右边距。它的长度值可以是%或auto。
这是一个例子-
This is a paragraph with a specified right margin
This is another paragraph with a specified right margin in percent
它将产生以下结果-