购物车
登陆 / 注册
微信扫码登陆

CSS margin(外边距)

CSS margin(外边距)
外边距指的是围绕在元素边框的空白区域,可以通过margin属性来设置外边距,它接受任何长度单位、百分数值甚至负值
编辑:前端控 前端控 更新时间:2019-02-01 13:48:15

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设置元素的上外边距
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
文章列表
教程文档
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号