CSS盒模型margin和padding

margin和padding

margin ——边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白.
margin边外补白可以取负值;边外补白是看不到的,因为它本身是透明的.

padding ——边框的里面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离.

border——边框属性可以改变边框的显示方式.
通常使用border-width属性定义边框的宽度,border-color属性定义边框的颜色,border-style属性定义边框的样式,border属性统一定义边框样式的几个属性.

盒模型

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

注意：上下内边距与左右内边距一致；上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

p {padding: 10%;}

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

屏幕快照 2017-07-14 14.13.32.png

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
详细：http://www.w3school.com.cn/css/css_margin_collapsing.asp

浏览器兼容性

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

清除浏览器默认样式

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

* {
  margin: 0;
  padding: 0;
}