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

时间 2019-11-30

原文原文链接

一提及盒模型，你们都会说，content+padding+margin+border。post

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

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

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

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

	块级元素	行内元素
常见元素	div、p、form、ul、ol、li	span、strong、em
特性	独占一行，默认状况下，其宽度自动填满其父元素宽度orm	不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化blog
width、height属性	能够设置，设置了宽度仍是独占一行	无效
margin和padding属性	能够设置	水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，ci 但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。table
对应的相关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

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