无涯教程具有以下属性来设置元素边距。
margin : 指定一种简写属性,用于在一个声明中设置边距属性。
margin-bottom : 指定元素的底部边距。
margin-top : 指定元素的顶部边距。
margin-left : 指定元素的左边距。
margin-right : 指定元素的右边距。
现在将通过示例了解如何使用这些属性。
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
<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。
链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-margins.html
来源:LearnFk无涯教程网
<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>
它将产生以下输出-
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)