📜  CSS-边距

📅  最后修改于: 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

它将产生以下结果-