div默认外边距是多少_div外边距的问题

楼主的问题可以分解成几个点

1、重叠发生的机制

2、border如何阻止了重叠

3、重叠解决方案

重叠发生的常见情况

1.元素互为相邻关系

2.元素互为包含关系(父子关系)

重叠发生的机制

无论是相邻关系还是包含关系，重叠发生依赖于两个元素的margin能够相互接触到！！相互触碰到！相互摩擦！

相邻关系

如果添加border或者padding还会发生重叠吗？答案是肯定的。

不论如何设置padding或者border，对于相邻元素来说，它们的margin都能互相接触！！！！！所以会发生重叠。

包含关系

注意，这时候border，padding都是0.父元素的margin和子元素的margin能够相互接触到。

如果给父元素加个padding或者border，那么子元素的margin就无法接触到父元素的margin了。因此也无法发生重叠了！这里以border为例。

如果给子元素添加border或者padding是不起作用的。

外边距重叠的解决方式

1.创建BFC(BFC是个坑，以后再聊吧)

2.避免margin的亲密接触。

---------------------------------------1月19更新部分(为加深理解)---------------------------------

刚好看到这个例子，便试了下，觉得可以算是测试margin负值的理解吧。

首先来考虑下这段代码。

verticalMargin

body{margin:0;padding:0;}

li{margin-bottom:20px;background:#ee3;}

ul{background:#af3;margin-bottom:-15px;}

h1{margin-top:-18px;background:#ccc;}

/*h1{background:#ccc;}*/

• A list item
• Another list item

A haeding

这里有各种重叠，ul的负外边距、h1的负外边距以及li的正外边距。

以上代码运行的效果最终效果是：

1.文字描述：ul和h1之间相间隔2px

2.实际效果图

为什么会这样呢？

这个问题的思路有两种，

一、是先考虑ul和li之间的重叠，再考虑h1的重叠。(先考虑包含关系再考虑相邻关系)

二、是先考虑ul和h1的重叠，再考虑li的重叠。(先考虑相邻关系再考虑包含关系)

最终得到的结果都一样。