设置 box-sizing 为 border-box 后外边距(margin)会合并吗

border-box 告诉浏览器去理解你设置的边框内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

设置 box-sizing: border-box; 后,简言之:

  • 盒子的宽度 = border + padding + width
  • 盒子的高度 = border + padding + height

所以 box-sizing: border-box; 对外边距并没有影响,原来会合并的外边距设置完依旧会合并。

<div style="box-sizing: border-box;width: 200px; height: 200px; padding: 20px; margin: 10px; background: #ccc;"></div>
<div style="box-sizing: border-box;width: 200px; height: 200px; padding: 20px; margin: 10px; background: #ccc;"></div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注