bootstrap的盒子模型好奇怪

Question

最近帮朋友解决一个前端的小应用，然后对方指明说他们公司必须要用bootstrap。我之前从未使用过现成库，刚一接触觉得确实还不错，不过在自己写一些不在库包含的前端组建时，发现css不听话了。发仔细研究才发现是盒子模型很妖怪，似乎是内外盒子模型的感觉。

一旦设置了高度或者宽度发现无论你设置margin或者padding或者border之类的，你的总size是不变的，好吧这点用起来却是也算方便，这里我也是能理解的。

问题出现了，发现设置上下padding 的时候，发现第二个下面元素的padding-top和前一个元素的padding-bottom重叠了，额，这样无奈，我padding-bottom设置的数值必须减去下一个元素的padding-top才能得到正确的值，虽然问题可以解决，但是这点让我十分不解

请对前端比较了解的朋友告知，解答我心中的疑惑。

Answer 1

我猜测是不是有些元素设置了 box-sizing属性为border-box，关于这个样式，自行百度，手机打字不方便啊。关于第二个问题，在jsbin上重现一下，方便大家帮你解决。

Answer 2

测试环境是什么？
bootstrap 的box-sizing属性为border-box，所以总的size是不变的
第二个问题建议贴代码

Answer 3

看bootstroop的css文件第一行 *{ box-sizing:border-box}
它改变了盒模型。
想知道为什么。查下 box-sizing:border-box 自然明白原因。

Answer 4

在隔开元素的时候不应该是用margin吗
padding也不存在外边距融合行为
还请重现一下

Answer 5

建议重新添加一个新的class在firebug里面查看一下，提高一下优先级来解决问题。

Answer 6

第二问题是css的margin的垂直塌陷，标准就是这样的。就是margin-top和margin-bottom去数字大的那个。

Answer 7

bootstrap应该把盒子的样式设置成了怪异和模型了 box-sizing:border-box
第二个应该是BFC问题 应该把盒子设置成overflow:hidden就好了