CSS margin



CSS margin

CSS margin属性用于定义元素周围的空间。它是完全透明的,没有任何背景色。
可以使用单独的属性独立更改顶部,底部,左侧和右侧边距。您还可以通过使用速记边距属性来一次更改所有属性。
有以下
CSS边距属性:

CSS保证金属性

属性 说明
margin 在一个声明中设置left、right、top、bottom属性。
margin-left 它用于设置元素的左边距。
margin-right 用于设置元素的右边距。
margin-top 用于设置元素的上边距。
margin-bottom 它用于设置元素的底边距。

CSS Margin的值

以下是Margin的一些值。
说明
auto 左右边距均匀的占据空间。
length 用于指定边距pt,px,cm等,其默认值为0px。
它用于定义包含元素宽度的百分比的边距。
inherit 用于继承父元素的边距。
注意:您还可以使用负值来重叠内容。

CSS Margin示例

您可以为元素的不同侧面定义不同的边距。
 <!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;width:300px;
}
p.ex {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 100px;
    margin-left: 100px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的空白显示。</p>
</body>
</html>

输出:

此段落未以指定的边距显示。

此段落以指定的空白显示。

Margin简写属性

CSS简写属性用于缩短代码。它在一个属性中指定所有边距属性。
有四种类型可以指定margin属性。您可以使用其中之一。

margin:50px 100px 150px 200px;
margin:50px 100px 150px;
margin:50px 100px;
margin:50px;

1)margin:50px 100px 150px 200px;

topmargin值为50px
rightmargin值为100px
bottommargin值为150px
leftmargin值为200px
 <!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;width:300px;
}
p.ex {
    margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>未以指定的边距显示此段落。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>

输出:

未以指定的边距显示此段落。

此段落以指定的边距显示。

2)margin:50px 100px 150px;

topmargin值为50px
left+rightmargin值为100px
bottommargin值为150px
 <!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;width:300px;
}
p.ex {
    margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>

输出:

此段落未以指定的边距显示。

此段落以指定的边距显示。

此段落未以指定的边距显示。
此段落以指定的边距显示。

3)边距:50px 100px;

它标识:
顶部和底部边距值为50px
左右边距值为100px
 <!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;width:300px;
}
p.ex {
    margin: 50px 100px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>

输出:

此段落未以指定的边距显示。

此段落以指定的边距显示。

4)边距:50px;

它标识出:
右上角左下角和左边距值为50px
 <!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: pink;width:300px;
}
p.ex {
    margin: 50px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>

输出:

此段落未以指定的边距显示。

此段落以指定的边距显示。