无涯教程具有以下属性来设置元素边距。
margin : 指定一种简写属性，用于在一个声明中设置边距属性。
margin-bottom : 指定元素的底部边距。
margin-top : 指定元素的顶部边距。
margin-left : 指定元素的左边距。
margin-right : 指定元素的右边距。
现在将通过示例了解如何使用这些属性。
margin 属性
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
<html>
<head>
</head>
<body>
<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">:</span><span class="lit">10px</span><span class="pln"> </span><span class="lit">2</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">2</span><span class="pun">%</span><span class="pln"> </span><span class="pun">-</span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">2</span><span class="pun">%</span><span class="pln"> </span><span class="pun">-</span><span class="lit">10px</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
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
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
margin-bottom 属性
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>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is another paragraph with a specified bottom margin in percent
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
margin-top 属性
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>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is another paragraph with a specified top margin in percent
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
margin-left 属性
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>
</span><span class="tag"><p</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">
This is another paragraph with a specified top margin in percent
</span><span class="tag"></p></span><span class="pln">
</body>
</html>
它将产生以下输出-
margin-right 属性
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>
它将产生以下输出-
