Question

CSS的border属性加上后，为什么会无缘由的增加DIV块的大小呢？

我做过测试，一个DIV块，未指定它的高度，完全由内部元素撑起来的。此时，这个DIV块有无border属性，为什么会影响这个DIV块的高度啊？





Answer 1

是因为一个css设置：box-sizing

默认是content-box，实际width=设置width+边框+间距，而在border-box下，宽度设置好，边框和间距会自动调整宽度，满足设置的值。

语法
box-sizing：content-box | border-box
默认值：content-box
取值
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

参考百度百科：http://baike.baidu.com/link?url=gAYu8r1bOOTURx9cwRl_ltLeEisHwww-TWvOxngNc5gWS_bCl0pE869koc1s2xGVISwuOObHYNWa3Gy0FQYBuq

Answer 2

DIV所占区域大小（宽度举例）=
宽（width）+内边距(pading)+边框(border大小)+外边距(margin)

所以增加边框自然会增加整个div所占区域了

Answer 3

• 原因：总宽度width=设置的width+边框+间距，所以产生了内边距自动合并，导致div块变大。
  

• 解决办法：设置box-sizing属性为border-box，这样宽度设置好，边框和间距会自动调整宽度，满足设置的值。

根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。
具体步骤如下：／导致这种情况的原因主要是……

参考资料

百度百科.百度百科[引用时间2018-4-10]

Answer 4

你遇到的貌似是内边距自动合并的问题。

追问

恩，我刚调试了下，不过不是内边距合并，是外边距合并了

追答

外边距是不会合并的。实际上还是内边距合并了，只是看起来像外边距