border属性对元素实际width的影响总结

今天遇到一个问题。



块A包裹块B，明明在B设置了margin-bottom：12px。为什么A的高还是不变？

然而，在给A设置了border-bottom后。A的高就如期待的一样了，59+12=71px 。

这是为什么。

首先知识点1：box-sizing

默认是content-box，即实际width=设置width+边框+间距。

如果设置为border-box，padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

。

好吧吃午饭路上想明白了。是外边距合并问题。

没有border的时候外边距合并，上下的margin都是10，加入border后，双方的margin不再合并。所以出现了刚才的情况。