CSS margin(外边距)

外边距指的是围绕在元素边框的空白区域,可以通过margin属性来设置外边距,它接受任何长度单位、百分数值甚至负值。

margin属性的值

描述
auto设置浏览器的边距,
这样做的结果会依赖于浏览器
length定义一个固定的margin(使用像素,pt,em等)
%定义一个使用百分比的边距

注意: margin可以使用负值,重叠的内容

单边外边距属性

实例

p 
{
background-color: pink;
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

值复制

通过值复制,不用重复地键入这对数字

如果缺少左外边距的值,则使用右外边距的值

如果缺少下外边距的值,则使用上外边距的值

如果缺少右外边距的值,则使用上外边距的值

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设置元素的上外边距