编程教程
编程问答 ACM与蓝桥杯竞赛入门 C语言教程 C++教程 数据结构教程 单片机教程 Python教程 JAVA教程 编译器教程 C语言函数库 更多教程CSS外边距属性（margin）
一、CSS外边距属性（margin）
| 属性 | 描述 |
| margin | 简写属性。在一个声明中设置所有边距属性 |
| margin-bottom | 设置元素的下外边距属性 |
| margin-left | 设置元素的左外边距属性 |
| margin-right | 设置元素的右外边距属性 |
| margin-top | 设置元素的上外边距属性 |
CSS margin(外边距)属性定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
| 值 | 描述 |
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
1. 使用像素值（px）设置外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS简单学习</title>
<style type="text/css">
p.nomargin {
background-color: #FF0000
}
p.margin {
background-color: #FF0000;
margin-top: 100px;
margin-bottom: 100px;
margin-left: 80px;
margin-right: 80px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落</p>
<p>这是一个指定过边距大小的段落</p>
</body>
</html>运行结果：
2. 使用margin简写属性设置外边距（厘米值cm、百分比值%）
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
（1）margin:10px 5px 15px 20px;
a.上边距是 10px
b.右边距是 5px
c.下边距是 15px
d.左边距是 20px
（2）margin:10px 5px 15px;
a.上边距是 10px
b.右边距和左边距是 5px
c.下边距是 15px
（3）margin:10px 5px;
a.上边距和下边距是 10px
b.右边距和左边距是 5px
（4）margin:10px;
a.所有四个边距都是 10px
注意： 负值是允许的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS简单学习</title>
<style type="text/css">
p {
background-color: aqua;
}
p.ex1 {
margin: 2cm 5cm 3cm 5cm;
}
p.ex2 {
margin: 20% 25% 30% 35%;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落</p>
<p>这是一个使用"厘米cm"指定边距大小的段落</p>
<p>这是一个使用"百分比值%"指定边距大小的段落</p>
</body>
</html>运行结果：
二、margin 外边距重叠或者叠加问题
1. 外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并，合并为一个外边距。关于外边距折叠有以下几点需要注意：
（1）margin 折叠只发生在块级元素上；
（2）浮动元素的外边距不会与任何外边距发生折叠；
（3）设置了 overflow 属性且值不为 visible 的块级元素，将不会与它的子元素发生外边距折叠；
（4）绝对定位元素的外边距不与任何外边距发生折叠；
（5）根元素（例如<body>）的外边距不与其它任何外边距发生折叠。
2. CSS外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。
本文固定URL： https://www.dotcpp.com/course/1143
CSS 尺寸/宽高属性（width/height）
下一课：CSS内边距属性（padding）
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：
一点编程也不会写的： 零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的 C语言进阶课程
从零到写出一个爬虫的 Python编程课程
只会语法写不出代码？手把手带你写100个编程真题的 编程百练课程
信息学奥赛或C++选手的 必学 C++课程
蓝桥杯ACM、信息学奥赛的必学课程： 算法竞赛课入门课程
手把手讲解近五年真题的 蓝桥杯辅导课程
其他教程
顺序队列的介绍及C/C++代码实现
Java断言语句
最大流是什么？
什么是AC自动机？
JS表单
C语言realloc()函数:用于重新分配指定大小的堆内存空间
C语言cosh()函数:计算双曲余弦值
打开文件fopen函数的用法
Java对象的字符串表示
设计模式定义
如果Throwable是一个接口，那么异常处理会不会更容易？
RandomAccessFile流的常用方法有哪些？
C语言中!是什么意思
Java字符串与基本数据类型之间是怎样转换的？
C语言如何更改窗口大小
如何寻找字符串input中是否有和模式regex匹配的子序列？
什么是模？
C语言怎么生成随机数？
C语言中EOF是什么意思
C语言如何生成指定范围内的随机数