![1aa7ab3bc63d968c2fb5844656c7bb83.png](https://i-blog.csdnimg.cn/blog_migrate/3702514a73c2f75167e3d41442a87294.png)
hello,大家好我是margin,经常有小伙伴把我跟我的兄弟padding搞混,下面我就详细的说一下我的主要工作,让大家能够明白我到底是做什么的。
通常情况下,我会帮助一些元素让他们之间产生距离,先来看一段代码:
<!-- HTML结构 -->
![a525d39d2c06586b9b08a67234f4e474.png](https://i-blog.csdnimg.cn/blog_migrate/ff0a89baf94959e7ed26e97c925bd279.png)
两个写好的DIV元素会从上到下显示,就是上图的效果,在这里我们会发现a的下方和b的上方紧紧挨在一起的,如果想让他们分开一些,可以给a添加一个margin
<
![047f42ba26f43e3234e209988e042a91.png](https://i-blog.csdnimg.cn/blog_migrate/33939513b4e6caa32cbb3bb91f4623fe.png)
为什么会变成这个样子了呢,我们本来只想让下方有距离就可以了,但是怎么感觉不一样呢?这是因为我的写法是有很多种的,可以先来研究一下有哪几种写法。
首先,刚刚写的是margin:20px,在这里如果后面写一个值的话,代表了上下左右四个方向上都会添加20像素的距离
![98b95e025de20819bf38c05120ef99bb.png](https://i-blog.csdnimg.cn/blog_migrate/8509dd7b9777345ef06ae11915d05c9b.png)
如果你写了两个值,那么第一个值代表上下距离,第二个值代表左右;
写三个值,第一个值代表上,第二个值代表左右,第三个值代表下;
写四个值,就分别代表上、右、下、左四个方向
参考下面的图例:
![5c03debad1ff0739f6b3b11cd8321cc9.png](https://i-blog.csdnimg.cn/blog_migrate/abc90b38c9018099e7f4fe0e8d66ba4c.png)
其实关于我的写法,还可以写单个方向的,使用margin-top、margin-left、margin-right、margin-bottom都可以实现。
div
![ca1216aa16b3db50fe8870ae2205d8e4.png](https://i-blog.csdnimg.cn/blog_migrate/5a0e1ffb6bcf9b67541c6fd64cfd06e5.png)
如上图所示
元素A,在左边有10像素的距离,
元素B,在右侧有10像素距离(不过由于浏览器默认靠左排列,这里看不出效果)
元素C,在下方有10像素距离
元素D,在上方有10像素距离
等等?! 好像哪里不对?
![6345ce37cd68ad68510f2cc34fca0172.png](https://i-blog.csdnimg.cn/blog_migrate/4cda41898c6459be4b7d78857333432c.png)
C和D之间好像只有10像素的距离,而不是我们期望的20像素。
好吧,我承认,这是我的问题。
当元素在垂直方向上(水平方向是正常的),两个元素,分别设置了margin-top和margin-bottom,我不会叠加这两段距离,而是把它们重叠在一起了。
这有可能会造成跟你的预期不符。以后写的时候要注意哦
通常情况下,我们只需要给一个元素设置距离就好了,例如:
<
![96e5e4ff62981dd2111a7dd1b8e23ef4.png](https://i-blog.csdnimg.cn/blog_migrate/8a79883c9190fdccf4b2dafc5fc84367.png)
这样就实现了a和b之间的距离,如果要想缩短他们的距离该怎么做呢?
你只要写负值,就能实现,就像下面这样
<
![97bcea3bbb4e108dabe923f4e6498ca4.png](https://i-blog.csdnimg.cn/blog_migrate/d917bd9c2b13c89e4c95e90c076a1a47.png)
看,我是不是很强大!但同时我还有一个小bug,那就是两个元素嵌套的时候
比如:这里有一个元素,里面又放了一个元素,如果给里面的小元素写了margin-top会发现没有效果,我们来试验一下。
<!-- HTML结构 -->
![396447055efa370b990b8c88c8ef7d9c.png](https://i-blog.csdnimg.cn/blog_migrate/42c7ffdbc8f4db9eaad10bd867bd7fd9.png)
上面是没有加margin-top的效果,在看一下给粉色块加margin-top的效果
<
![cd37af1956fcd35ed5c3b43df962e505.png](https://i-blog.csdnimg.cn/blog_migrate/71d04992bad268533b58d2acf730c4a7.png)
这个问题的解决方式有:
1)给父元素添加overflow:hidden;
2)给父元素添加border、padding属性
3)给其中一个元素浮动
我们可以加overflow:hidden来看一下效果
<
![4ddf952be2d7f56fdd3b280750e6eb6e.png](https://i-blog.csdnimg.cn/blog_migrate/ff7be691ddf1b5f6a1e5eaf045851c73.png)
好了,这样就完美解决了这个小bug。
总结一下
大家通常喜欢叫我外边距,我觉得这个名字挺恰当,我的主要作用就是控制元素之间的距离,下次有机会,再给你介绍我的大兄弟padding,今天先聊到这,再见!
千锋HTML5学院:如何讲清楚this指向?zhuanlan.zhihu.com![0af9b7540b13b4740d6cd5e607516027.png](https://i-blog.csdnimg.cn/blog_migrate/66ef418bbe29c5ccc477e4ef817adb4d.png)
![a3a060115ef2614c3b9b1780c073d365.png](https://i-blog.csdnimg.cn/blog_migrate/282fc0e03483fc282d1c4dd185882de2.png)
![c31eb8bc5acc98254e65de0e38bd5704.png](https://i-blog.csdnimg.cn/blog_migrate/b6ce8f97f506f4667762cc236bff1d95.png)