padding 和 margin 不为人知的一面 ---（深度整理）

一说起盒模型，大家都会说，content+padding+margin+border。

恩，就这么几个，概念网站都写得清清楚楚了，但是你对他们的理解又有多少？

经常遇到“这里怎么回事？”“明明写了怎么会不起作用？”一找就是半天╮(╯▽╰)╭（我也发生过）。归根结底还是对本质不够理解。

这里我就查找了许多资料，整理了一下，现在让我们来挖挖padding和margin的坟吧！

在了解padding和margin之前，我们先要知道什么是块元素，什么是内联元素（行内元素）。一个表格搞定。

	块级元素	行内元素
常见元素	div、p、form、ul、ol、li	span、strong、em
特性	独占一行，默认情况下，其宽度自动填满其父元素宽度	不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
width、height属性	可以设置，设置了宽度还是独占一行	无效
margin和padding属性	可以设置	水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
对应的相关display属性	block	inline
切换	display:inline变成行内元素	display:block变成块级元素

从上解释可以看到padding 和margin是针对块元素的，而对内联元素上下设置不起作用。为什么不起作用？

其实并不是不起作用，而是不影响line-height，就是说你的上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。

来看看一位博友举得一个例子：

<style>

　　　　　　　　span{
　　　　　　　　　　padding:20px;
　　　　　　　 color:red;
　　　　　　　　border:2px solid red;
　　　　　　　　}

</style>

<body>

　　　　　关于内联元素的 padding，margin，border 等等，它们并不是没有作用，而是不会影响 line-height，就是说你的上下 padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。用楼主的例子来说一下
　　　　<span>测试span</span>
　　关于内联元素的 padding，margin，border 等等，它们并不是没有作用，而是不会影响 line-height，就是说你的上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。用楼主的例子来说一下
　　</p>
</body>

效果图：

可以看到padding是起作用的。只是line-height没有变化而已。

这下知道为什么有时候设置了padding，但就是不起作用的原因了吧。

为了更好的记住他，来看看另一位的想法吧：

懒了点吧图截过来了。0.0

不过我认为很合理，在没有好的解释前先记下吧。

如果你想padding上下起作用的话：

　　　　1.可以用line-height 属性

　　　　2.display转化为块元素，我比较喜欢使用inline-block属性。

　　　　　　　　　　ps:关于解决display：inline-block 在IE下的兼容性解决办法：

　　　　　　　　　　　　　　div {display:inline-block;...}
　　　　　　　　　　　　　　div {display:inline;}

　　　　　　　　　　为什么要这样，牵扯太多，就要去了解haslayout了（一环接一环好可怕.....）

　　　　3.浮动 float

[坚持.....每天坚持......一直坚持......]重要的事情说三遍。