css3属性：box-sizing: border-box;

margin指外边距，padding指内边距，在盒模型中（暂不考虑部分浏览器兼容问题）：

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

 

比如两个div设置相同的宽度，但是设置不同的padding值，页面显示的效果是不同的，显示的是div整体的宽度。

 

解决办法：

给div添加属性：box-sizing: border-box;

box-sizing: border-box;

 

注意：

1.box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中。

2.学习地址：https://www.runoob.com/css3/css3-box-sizing.html