margin 和 padding

边距冲突： 

  margin和padding都是定义元素间隔的，如果元素没有board或者background color的话，它们所表示的间隔是一样的。

在处理叠加时，margin会取最大的间隔，如2个div，上面的div的margin-bottom=15px;下面的div的margin-top=30px

;这时两个div的上下间隔不是15+30而是30。

边距折叠：指垂直方向的margin碰到一起，只显示一个边距。

如下面的情况：

 

<div style="margin-top:20px;margin-bottom:20px">
			<h1>don't try this at home !</h1>
		</div>
		<div>test sdd sdfjdfkdk kdfjkdi tjk tjd hererk kekrer</div>

 因为h1默认的margin-top是21，所以div里面的设置的margin-top:20px;margin-bottom:20px是没有效果的，它和

h1的margin折叠了，要显示效果可以在div里面添加padding：1px

 

用margin负值消除空格：

    margin和padding的取值可以是负数，表示去除掉间隔，在页面布局时和float合用比较多。

 

显示行内盒子和块级盒子：

    html的元素可以分成两种类型：inline和block。inline类型的元素如<strong>,<a>,<image>等等，block类型的如：<div>,<table>,<p>等等。margin和padding在处理这两种类型的原型时是不同的。

    inline类型的标签无法使用margin-top，margin-bottom和padding-top，padding-bottom。对于这类标签可通过设置line-height来实现相应的样式。

    另外使用display：inline-block；可以让行内盒子也能使用top/bottom margin和padding（也适用ie6和ie7，同时使用vertical-align：middle来保证居中）。

   <img>虽然是行内标签，但是可以使用padding和margin增加行高。