元素的外边距(margin)是围绕在元素边框以外(不包括边框)的空白区域,这片区域不受 background 属性的影响,始终是透明的。
默认情况下如果不设置外边距属性,HTML 元素就是不会有外边距,但也有例外的情况,因为浏览器会为一些 HTML 元素设置默认的外边距,例如<p>元素。您可以使用下面的属性来为 HTML 元素设置外边距:
上述外边距属性的可选值如下表所示:
值 | 描述 |
---|---|
auto | 由浏览器计算外边距的尺寸 |
length | 使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸,可以为负值,默认值为 0px |
% | 定义基于父元素的宽度百分比的外边距,可以为负值 |
inherit | 从父元素继承外边距属性的值 |
【示例】使用 margin-top、margin-bottom、margin-right、margin-left 几个属性分别设置元素四个方向上的外边距:
<!DOCTYPE html>
<html>
<head>
<style>
div.box-one {
border: 1px solid red;
display:inline-block; /*将元素转换为行内元素*/
}
div.box-two {
/*为了能更直观的看出效果,这里为元素设置上边框和背景色*/
border: 1px solid black;
background: #CFF;
width: 200px;
height: 80px;
margin-top: 10px;
margin-right: 1em;
margin-left: 1cm;
}
div.box-three {
/*为了能更直观的看出效果,这里为元素设置上边框和背景色*/
border: 1px solid #CCC;
background: #CCC;
width: 180px;
height: 100px;
margin-top: 10px;
margin-bottom: 1em;
margin-right: 10px;
margin-left: 1cm;
}
</style>
</head>
<body>
<div class="box-one">
<div class="box-two">
margin-top: 10px;<br>
margin-right: 1em;<br>
margin-left: 1cm;
</div>
<div class="box-three">
margin-top: 10px;<br>
margin-bottom: 1em;<br>
margin-right: 10px;<br>
margin-left: 1cm;
</div>
</div>
</body>
</html>
运行结果如下图所示:
这里需要特别说明一下 margin 属性,与其它几个属性不同,margin 属性可以接受 1~4 个参数(参数之间使用空格分隔):
【示例】使用 margin 属性为元素设置外边距:
<!DOCTYPE html>
<html>
<head>
<style>
div.box-one {
border: 1px solid red;
display:inline-block; /*将元素转换为行内元素*/
}
div.box-two {
/*为了能更直观的看出效果,这里为元素设置上边框和背景色*/
border: 1px solid black;
background: #CFF;
width: 200px;
height: 100px;
margin: 10px 1em;
}
div.box-three {
/*为了能更直观的看出效果,这里为元素设置上边框和背景色*/
border: 1px solid #CCC;
background: #CCC;
width: 150px;
height: 50px;
margin: 10px 0px 1ex 1em;
}
</style>
</head>
<body>
<div class="box-one">
<div class="box-two">margin: 10px 1em;</div>
<div class="box-three">margin: 10px 0px 1ex 1em;</div>
</div>
</body>
</html>
运行结果如下图所示:
外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并,合并为一个外边距。关于外边距折叠有以下几点需要注意:
1) 在相邻的两个兄弟元素之间:
2) 在父元素与其子元素之间:(注意:父元素不能定义边框和内边距,且父元素与子元素之间不能有其它元素)