个人理解：
padding是内边距，用于设置边框与盒子内容的距离
margin是外边距，设置的是当前盒子与外部盒子（父元素）的距离
直接看例子：
设置一个400×400的盒子，里面有一个居中的200×200的盒子
下面两种写法的效果是一样的：
margin:
<style> #div1 { height: 400px; width: 400px; border: 4px dotted pink; background-color: yellow; } #div2 { height: 200px; width: 200px; background-color: orange; margin-top: 100px; margin-left: 100px; } </style> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body>
padding:
<style> #div1 { height: 300px; width: 300px; border: 4px dotted pink; background-color: green; padding-left: 100px; padding-top: 100px; } #div2 { height: 200px; width: 200px; background-color: skyblue; } </style> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body>
值得注意的是
实际宽度=width+左右border+padding
所以用padding的写法需要把父元素的width和height修改成300
