大家在看任何跟边界有关的 CSS 时不晓得有没有看过这张图，这张图代表着 HTML 内的每个元素的边界设定。
今天这篇文章可以说是笔者在初学网页时最常遇到的问题，相信很多人在初学网页的时候都会 margin 、 padding 傻傻分不清，两者的作用都是负责调整边界的间距，到底两个差别在哪里呢？以及 border 与 box-sizing 之间又有什么关系呢？笔者今天就用这篇文章带大家深入了解 HTML 元素的边界设定。
margin 是负责调整 元素与元素 之间的边界间距，属于元素外部的边界调整。
padding 是负责调整 元素内所有内容与元素自身 的边界间距，属于元素内部的边界调整。
设定元素内容与元素自身上边界的间距。
设定元素内容与元素自身右边界的间距。
设定元素内容与元素自身下边界的间距。
设定元素内容与元素自身左边界的间距。
box-sizing 的出现是用来调整区块的内距与边框计算方式，与 border 以及 padding 的设定有关，常见的状况就是元素内的内容设定了 border 以及 padding 导致外框超出原本元素的外框，影响了网页的美观程度。
设定的宽度仅为内容宽度， padding 与 border 宽度会再额外加上去，所以内容仍然会超出元素自身的外框。
border-box
设定的宽度就已经包含内容宽度、 padding 与 border 宽度，所以内容不会超出元素自身的外框。
今天提到了非常重要的边界关系，假如今天要调整的是 元素与元素 之间不要靠得太近，就可以用 margin ，如果是要调整 元素内的内容与元素自身 不要靠得太近，就可以用 padding ，最后就用一个简单的范例让大家更了解 margin 以及 padding 的相关操作应用吧！