hello，大家好我是margin，经常有小伙伴把我跟我的兄弟padding搞混，下面我就详细的说一下我的主要工作，让大家能够明白我到底是做什么的。

 

　　点击加入前端千人大群交流学习,更多课程视频-源码软件安装包免费赠送——

 

　　web学习书籍电子档 txt【点击领取】

 

　　通常情况下，我会帮助一些元素让他们之间产生距离，先来看一段代码：

 

　　<!-- HTML结构 -->

 

　　<div class="boxA">a</div>

 

　　<div class="boxB">b</div>

 

　　​

 

　　<style>

 

　　/* css修饰 */

 

　　div{width: 200px;height: 200px;}

 

　　.boxA{background: palevioletred;}

 

　　.boxB{background: royalblue;}

 

　　</style>

 

　　两个写好的DIV元素会从上到下显示，就是上图的效果，在这里我们会发现a的下方和b的上方紧紧挨在一起的，如果想让他们分开一些，可以给a添加一个margin

 

　　<style>

 

　　/* css修饰 */

 

　　div{width: 200px;height: 200px;}

 

　　.boxA{background: palevioletred;margin:20px;}

 

　　.boxB{background: royalblue;}

 

　　</style>

 

　　为什么会变成这个样子了呢，我们本来只想让下方有距离就可以了，但是怎么感觉不一样呢？这是因为我的写法是有很多种的，可以先来研究一下有哪几种写法。

 

　　首先，刚刚写的是margin:20px，在这里如果后面写一个值的话，代表了上下左右四个方向上都会添加20像素的距离

 

　　如果你写了两个值，那么第一个值代表上下距离，第二个值代表左右；

 

　　写三个值，第一个值代表上，第二个值代表左右，第三个值代表下；

 

　　写四个值，就分别代表上、右、下、左四个方向

 

　　参考下面的图例：

 

　　其实关于我的写法，还可以写单个方向的，使用margin-top、margin-left、margin-right、margin-bottom都可以实现。

 

　　div{width: 60px;height: 60px;}

 

　　.boxA{background: palevioletred;margin-left:10px;} /*左*/

 

　　.boxB{background: royalblue; margin-right:10px;} /*右*/

 

　　.boxC{background: green; margin-bottom:10px;} /*下*/

 

　　.boxD{background: orange;margin-top:10px;} /*上*/

 

　　如上图所示

 

　　元素A，在左边有10像素的距离，

 

　　元素B，在右侧有10像素距离（不过由于浏览器默认靠左排列，这里看不出效果）

 

　　元素C，在下方有10像素距离

 

　　元素D，在上方有10像素距离

 

　　等等？！ 好像哪里不对？

 

　　C和D之间好像只有10像素的距离，而不是我们期望的20像素。

 

　　好吧，我承认，这是我的问题。

 

　　当元素在垂直方向上（水平方向是正常的），两个元素，分别设置了margin-top和margin-bottom，我不会叠加这两段距离，而是把它们重叠在一起了。

 

　　这有可能会造成跟你的预期不符。以后写的时候要注意哦

 

　　通常情况下，我们只需要给一个元素设置距离就好了，例如：

 

　　<style>

 

　　/* css修饰 */

 

　　div{width: 200px;height: 200px;}

 

　　.boxA{background: palevioletred;margin-bottom:20px;}

 

　　.boxB{background: royalblue;}

 

　　</style>

 

　　这样就实现了a和b之间的距离，如果要想缩短他们的距离该怎么做呢？

 

　　你只要写负值，就能实现，就像下面这样

 

　　<style>

 

　　/* css修饰 */

 

　　div{width: 200px;height: 200px;}

 

　　.boxA{background: palevioletred;margin-bottom:-50px;}

 

　　.boxB{background: royalblue;}

 

　　</style>

 

　　看，我是不是很强大！但同时我还有一个小bug，那就是两个元素嵌套的时候

 

　　比如：这里有一个元素，里面又放了一个元素，如果给里面的小元素写了margin-top会发现没有效果，我们来试验一下。

 

　　<!-- HTML结构 -->

 

　　<div class="wrap">

 

　　<div class="box"></div>

 

　　</div>

 

　　​

 

　　<style>

 

　　/* css修饰 */

 

　　.wrap{width:200px;height: 200px;background: #ccc;}

 

　　.box{width: 100px;height: 100px;background: pink;}

 

　　</style>

 

　　未添加margin的效果

 

　　上面是没有加margin-top的效果，在看一下给粉色块加margin-top的效果

 

　　<style>

 

　　/* css修饰 */

 

　　.wrap{width:200px;height: 200px;background: #ccc;}

 

　　.box{width: 100px;height: 100px;background: pink;margin-top:20px;}

 

　　</style>

 

　　是不是跟你想象的有点不一样？

 

　　这个问题的解决方式有：

 

　　1)给父元素添加overflow:hidden;

 

　　2)给父元素添加border、padding属性

 

　　3)给其中一个元素浮动

 

　　我们可以加overflow：hidden来看一下效果

 

　　<style>

 

　　/* css修饰 */

 

　　.wrap{width:200px;height: 200px;background: #ccc;overflow:hidden;}

 

　　.box{width: 100px;height: 100px;background: pink;margin-top:20px;}

 

　　</style>

 

　　好了，这样就完美解决了这个小bug。

 

　　总结一下

 

　　大家通常喜欢叫我外边距，我觉得这个名字挺恰当，我的主要作用就是控制元素之间的距离，下次有机会，再给你介绍我的大兄弟padding，今天先聊到这，再见！