首先，让大家来了解内边距。通过设置元素的padding属性可以实现内边距的设置。padding属性有四个方向的值可以设置，分别是上（top）、右（right）、下（bottom）和左（left）。如果大家想同时设置四个方向的内边距，可以使用缩写的形式：padding：上 右 下 左；
.box {
padding: 20px; /* 四个方向同时设置20px的内边距 */
padding-top: 10px; /* 上方向设置10px的内边距 */
padding-bottom: 10px; /* 下方向设置10px的内边距 */
padding-left: 40px; /* 左方向设置40px的内边距 */
padding-right: 40px; /* 右方向设置40px的内边距 */
}接下来，大家来看看外边距的设置。通过设置元素的margin属性可以实现外边距的设置。margin属性同样有四个方向的值可以设置，如果大家想同时设置四个方向的外边距，也可以使用缩写的形式：margin：上 右 下 左；
.box {
margin: 20px; /* 四个方向同时设置20px的外边距 */
margin-top: 10px; /* 上方向设置10px的外边距 */
margin-bottom: 10px; /* 下方向设置10px的外边距 */
margin-left: 40px; /* 左方向设置40px的外边距 */
margin-right: 40px; /* 右方向设置40px的外边距 */
}需要注意的是，外边距和内边距的区别在于，外边距是元素与周围元素的距离，而内边距则是元素内部内容与元素边缘的距离。另外，当两个元素间设置了margin的时候，它们的margin不会简单地叠加，而是会采用两者中较大的一个。