阅读量:0
padding是内边距，margin是外边距，border是边框，width是宽度。它们共同决定了元素在页面上的大小和位置。
单元表格
| 属性 | 描述 |
| Content | 实际内容区域，设置的宽度和高度仅指此部分。 |
| Padding | 内边距，即内容区与边框之间的空间。 |
| Border | 边框，围绕在padding外的区域。 |
| Margin | 外边距，元素外部与其他元素之间的空间，不计入盒子的实际大小。 |
相关问题与解答
问题1: 当设置了元素的width为300px，padding为10px，border为10px时，最终渲染的宽度是多少？
解答： 在这种情况下，最终渲染的宽度是300px + 20px（左右各10px的padding）+ 20px（左右各10px的border），总共是340px。
问题2: 如果一个元素的margin设置为auto，其宽度如何计算？
解答： 当margin设置为auto时，浏览器会自动计算外边距的值以使元素水平居中，如果元素的总宽度加上左右margin等于其父容器的宽度，则左右margin将平均分配剩余的空间，如果父容器的宽度是960px，而元素的宽度是300px，并且希望元素水平居中，那么左右margin将分别为(960px 300px) / 2 = 330px。
小伙伴们，上文介绍了“padding,margin,border与width宽度的关系图解教程”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
