Margin 它不会影响盒子本身的大小，但是它会
影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的：
Width = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom
值未声明的情况
如果未声明 padding 或者 border，那他们或者值为零(使用 css reset 时)，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)
1.块级盒的默认宽度
如果未声明宽度，并且盒子是静态或者相对定位的，宽度会保持 100％的 宽度，padding 和 border 会向内推动，而不是向外扩展。
但是，如果明确设置盒子的宽度为 100％，那么 padding 就会向外延展。
2.无宽度的绝对定位盒子
未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加。这种情况会持续到盒子的宽度达到父元素宽度的 100%（最近的相对定位的父元素或者浏览器窗口），然后就会折行。
3.无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度，直到其父元素的宽度（其父元素不必是相对定位的）。
4.内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子，但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形，它们也可以像其它盒子一样有 margin, padding he border折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边，但是只在第一行有效，因为那是盒子的起点。padding 正常的应用在文本的上部或下部，当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。