html+p外边距,CSS外边距
padding是外边距还是内边距CSS外边距是围绕在元素边框的空⽩区域。设置外边距会在元素外创建额外的“空⽩”。设置外边距的最简单的⽅法就是使⽤ margin 属性，这个属性接受任何长度单位、百分数值甚⾄负值。
中⽂名
css外边距外⽂名
css margin
CSS外边距外边框
编辑
围绕在元素边框的空⽩区域是外边距。设置外边距会在元素外创建额外的“空⽩”。
设置外边距的最简单的⽅法就是使⽤margin属性，这个属性接受任何长度单位、百分数值甚⾄负值。
CSS外边距属性
编辑
设置外边距的最简单的⽅法就是使⽤ margin属性。
margin 属性接受任何长度单位，可以是像素、英⼨、毫⽶或 em。
margin 可以设置为auto。更常见的做法是为外边距设置长度值。下⾯的声明在 h1 元素的各个边上设置了 1/4 英⼨宽的空⽩：
h1 {margin : 0.25in;}
下⾯的例⼦为 h1 元素的四个边分别定义了不同的外边距，所使⽤的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同，这些值是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
另外，还可以为 margin 设置⼀个百分⽐数值：
p {margin : 10%;}
百分数是相对于⽗元素的 width 计算的。上⾯这个例⼦为 p 元素设置的外边距是其⽗元素的 width 的 10%。
margin 的默认值是 0，所以如果没有为 margin 声明⼀个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在⽀持 CSS 的浏览器中，外边距会在每个段落元素的上⾯和下⾯⽣成“空⾏”。因此，如果没有为 p 元素声明外边距，浏览器可能会⾃⼰应⽤⼀个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
CSS外边距值复制
编辑
还记得吗，我们曾经在前两节中提到过值复制。下⾯我们为您讲解如何使⽤值复制。
有时，我们会输⼊⼀些重复的值：
p {margin: 0.5em 1em 0.5em 1em;}
通过值复制，您可以不必重复地键⼊这对数字。上⾯的规则与下⾯的规则是等价的：
p {margin: 0.5em 1em;}
这两个值可以取代前⾯ 4 个值。这是如何做到的呢 CSS 定义了⼀些规则，允许为外边距指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使⽤右外边距的值。
如果缺少下外边距的值，则使⽤上外边距的值。
如果缺少右外边距的值，则使⽤上外边距的值。
提供了⼀些更直观的⽅法来了解这⼀点：
换句话说，如果为外边距指定了 3 个值，则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后⼀个情况，如果只给定⼀个值，那么其他 3 个外边距都由这个值(上外边距)复制得到。
利⽤这个简单的机制，您只需指定必要的值，⽽不必全部都应⽤ 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;}/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}/* 等价于 1px 1px 1px 1px */
这种办法有⼀个⼩缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：
p {margin: 20px 30px 30px 20px;}
这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。
再来看另外⼀个例⼦。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px)：
p {margin: auto auto auto 20px;}
同样的，这样才能得到你想要的效果。问题在于，键⼊这些 auto 有些⿇烦。如果您只是希望控制元素单边上的外边距，请使⽤单边外边距属性。
简要理解备注：
p {margin: 20px 30px 40px 50px;}
四个数值表⽰的外边距为：上--右--下--左
p {margin: 20px 30px 40px;}
三个数值表⽰的外边距为：上--左右--下
p {margin: 20px 30px;}
两个数值表⽰的外边距为：上下--左右
CSS外边距边距属性
编辑
您可以使⽤单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使⽤ margin(需要键⼊很多auto)，⽽是可以采⽤以下写法：
p {margin-left: 20px;}
您可以使⽤下列任何⼀个属性来只设置相应上的外边距，⽽不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
⼀个规则中可以使⽤多个这种单边属性，例如：
h2 {margin-top: 20px;margin-right: 30px;margin-bottom: 30px;margin-left: 20px;}
当然，对于这种情况，使⽤ margin 可能更容易⼀些：
p {margin: 20px 30px 30px 20px;}
不论使⽤单边属性还是使⽤ margin，得到的结果都⼀样。⼀般来说，如果希望为多个边设置外边距，使⽤ margin 会更容易⼀些。不过，从⽂档显⽰的⾓度看，实际上使⽤哪种⽅法都不重要，所以应该选择对⾃⼰来说更容易的⼀种⽅法。
CSS外边距提⽰和注释
编辑
提⽰：Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。⽽ Opera 不是这样。相反地，
Opera 将内部填充(padding)的默认值定义为 8px，因此如果希望对整个⽹站的边缘部分进⾏调整，并将之正确显⽰于 Opera 中，那么必须对 body 的 padding 进⾏⾃定义。
词条图册
更多图册

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。