今天遇到一个问题。
块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不再合并。所以出现了刚才的情况。