srcmini本文概述
- CSS边距margin属性
- CSS边距margin值
- CSS边距示例
- 边距margin：简写属性
- 1）边距margin：50px 100px 150px 200px;
- 2）边距：50px 100px 150px;
- 3）边距margin：50px 100px;
- 4）边距：50px；
CSS Margin属性用于定义元素周围的空间。它是完全透明的, 没有任何背景色。清除元素周围的区域。
顶部, 底部, 左侧和右侧的边距可以使用单独的属性独立更改。你还可以通过使用速记边距属性来一次更改所有属性。
有以下CSS边距属性：
CSS边距margin属性
| 属性 | 描述 |
|---|---|
| margin | 此属性用于在一个声明中设置所有属性。 |
| margin-left | 用于设置元素的左边距。 |
| margin-right | 用于设置元素的右边距。 |
| margin-top | 用于设置元素的上边距。 |
| margin-bottom | 用于设置元素的底边距。 |
CSS边距margin值
这些是边距margin属性的一些可能值。
| 值 | 描述 |
|---|---|
| auto | 这用于让浏览器计算边距。 |
| length | 它用于指定边距pt, px, cm等。其默认值为0px。 |
| % | 它用于定义包含元素宽度百分比的边距。 |
| inherit | 它用于从父元素继承边距。 |
注意：你也可以使用负值来重叠内容。
CSS边距示例
你可以为元素的不同面定义不同的边距。
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
边距margin：简写属性
CSS速记属性用于缩短代码。它在一个属性中指定所有边距属性。
有四种类型可以指定margin属性。你可以使用其中之一。
- 边距：50px 100px 150px 200px;
- 边距：50px 100px 150px;
- 边距：50px 100px;
- 边距50px;
1）边距margin：50px 100px 150px 200px;
它表明：
上边距值为50px
右边距值为100px
底边距值为150px
左边距值为200px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
2）边距：50px 100px 150px;
它表明：
上边距值为50px
左右边距值为100px
底边距值为150px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
3）边距margin：50px 100px;
它表明：
顶部和底部边距值为50px
左右边距值为100px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
4）边距：50px；
它表明：
右上角左下角的值是50px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
评论前必须登录！
注册