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>
<p style="width:18em; color:#999;">
关于内联元素的 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
[坚持.....每天坚持......一直坚持......]重要的事情说三遍。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
