- HTML中文网
- 联系QQ:88526
- QQ交流群

- 微信公众号

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