科非设计网：CSS外边距属性网站建设科非网站设计官网www.k9f9.com

超过160万人正在关注

赶快来关注吧，这里有你想找的热点资讯，这里有你想要的各种资料，还有海量的资源，还在等什么。快来关注，大佬带你开车。

CSS margin 属性

设置外边距的最简单的方法就是使用 margin 属性。margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了1/4 英寸宽的空白：h1

下面为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1

与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的，另外，还可以为 margin 设置一个百分比数值：p ，这样p 元素的外边距是其父元素的 width 的 10%。margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。利用margin实现布局居中，基础用法：marign:0 auto;

即可实现对象居中，但需要一个条件，那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式，其下级包含对象设置了margin:0 auto也会让其布局居中，但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。

CSS 单边外边距属性

您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px，可以采用以下方法：

p

您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：margin-top、margin-right、margin-bottom、margin-left

一个规则中可以使用多个这种单边属性，例如：

h2 {

margin-top: 20px;

margin-right: 30px;

margin-bottom: 30px;

margin-left: 20px;

}

你也可以写为：p ，简写的逻辑仍为：上、右、下、左。