div设置宽度后再设置padding或margin超出父元素的解决办法

元素添加 box-sizing: border-box; 即可解决

在设置了元素宽度后再加上margin和padding，子元素会超出父元素宽度，肯定有时候是不需要这样的，解决方案：添加 box-sizing属性即可；

box-sizing的属性对应有三个值

box-sizing: content-box|border-box|inherit;

1.content-box

这应该就是属于默认的，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。

2.border-box 

为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3.inherit 

从父元素继承 box-sizing 属性的值。

来源：https://www.cnblogs.com/rangzhi/p/12193309.html