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

margin可以单独改变元素上下左右边距,也可以一次性改变所有的元素。

css Margin(外边距)-技术中文网

可能的值

auto设置浏览器边距
length定义一个固定的margin(用像素,pt,em等)
%定义一个百分比的边距

Margin-单边外边距属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>技术中文网(html99.cn)</title> 
<style>
p
{
	background-color:blue;
}
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距的段落<p>
<p class="margin">这是一个指定页边距的段落</p>
</body>

</html>
css Margin(外边距)-技术中文网
单外边距属性

Margin-简写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>技术中文网(html99.cn)</title> 
<style>
p
{
	background-color:blue;
}
p.margin
{
	margin:100px 50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距的段落</p>
<p class="margin">这是一个指定页边距的段落</p>
</body>

</html>
css Margin(外边距)-技术中文网
margin简写属性

margin属性可以有一到四个值,例:

  • margin:25px 50px 75px 100px; 
    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px

css边距属性

margin简写在一个声明中设置所有外边距属性
margin-bottom设置元素下边距
margin-left设置元素左边距
margin-right设置元素右边距
margin-top设置元素上外边距