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 中。