028_CSS外边距

最新推荐文章于 2023-11-23 09:15:11 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-11-23 09:15:11 发布

阅读量289

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109084825

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

1. 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的"空白"。

2. CSS外边距属性

3. 所有外边距都允许使用负值。

4. 上外边距

4.1. margin-top属性设置元素的上外边距。

4.2. 默认值

4.3. 可能的值

5. 右外边距

5.1. margin-right属性设置元素的右外边距。

5.2. 默认值

5.3. 可能的值

6. 下外边距

6.1. margin-bottom属性设置元素的下外边距。

6.2. 默认值

6.3. 可能的值

7. 左外边距

7.1. margin-left属性设置元素的左外边距。

7.2. 默认值

7.3. 可能的值

8. 外边距

8.1. margin简写属性在一个声明中设置所有外边距属性。

8.2. 您还可以按照上、右、下、左的顺序分别设置各边的外边距, 也可以只设置其中1~3个值, 因为外边距遵循值复制规则。

8.3. 例子

8.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS外边距</title>
		<meta charset="utf-8" />

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			p {
				width: 600px;
				background-color: orange;
			}
			#p1 { 
				margin: 10px; 
			}
			#p2 { 
				margin: 10%; 
			}
			#p3 { 
				margin: 1in 10% 10px 10em; 
			}
			#p4 { 
				margin: 10px auto 10px auto; 
			}
			#p5 { 
				margin-top: 10px; 
				margin-right: 10pt; 
				margin-bottom: 10%; 
				margin-left: 1em; 
			}
		</style>
	</head>
	<body>
		<p id="p1">margin-top属性设置元素的上外边距。</p> <hr/>
		<p id="p2">margin-right属性设置元素的右外边距。</p> <hr/>
		<p id="p3">margin-bottom属性设置元素的下外边距。</p><hr/>
		<p id="p4">margin-left属性设置元素的左外边距。</p><hr/>
		<p id="p5">margin简写属性在一个声明中设置所有外边距属性。您还可以按照上、右、下、左的顺序分别设置各边的外边距, 也可以只设置其中1~3个值, 因为外边距遵循值复制规则。</p><hr/>
	</body>
</html>

8.3.2. 效果图