教你分清margin和padding

---

前言

对于新入手前端的小白有没有以下场景？

margin和padding的用法常常搞不清，想给元素之间加点距离，好像加padding也行，加margin也能实现，但是如果页面中元素很多的时候，每个元素的占位却和你想象的不一样，只能再一个个排查。

我们来讨论一下关于CSS盒模型和这几个属性的使用。

一、CSS盒模型是什么？

页面是由一个个元素组成的，这些元素我们也可以称为盒子。关于盒模型的定义，MDN官网的定义是这样的：

我们翻译成人话。

就是说一个块级元素（block）在页面上占位的总面积是由外边距，边框，内边距和内容组成的，这个内容我们也可以是说width和height组成的部分，因为行内元素（inline）没有宽高（width和height）所以只有盒模型的一部分。

那么这个元素在页面的占位实际是这样的：

很明显的发现，肉眼直观的看见这个元素的大小是没有外边距margin的，也就是说一个元素实际大小不包含外边距。面试如果问一个元素的实际大小，不要算外边距这一块，但是要问盒模型的大小，要计算外边距，来算道题。

二、属性应用

1.margin

margin是一个复合属性，是包含四个属性（上外边距，右外边距，下外边距，左外边距）的合并，简记"上右下左"，用这个比较方便，当然你如果怕搞混，也可以分着用。

现在有一个width400px，height200px的元素在网页中我们看到的样子，

给它设置margin: 10px 20px 30px 40px;通过检查元素，实际它的占位是这样：

2.padding

padding也是复合属性，具体和margin差不多，不做过多赘述。

padding：padding-top,padding-right,padding-bottom,padding-left;

同样刚才那个元素，我们把margin设置的值改成padding，元素就变大了，因为内边距是占元素实际显示大小里面的。

3.border

border也是个复合属性，它是由边框宽度（border-width），边框样式（border-style）和边框颜色组成的（border-color），边框样式有这些可选值。

同样，刚才那个元素加一个边框，宽度10px，边框样式实线，边框颜色黑色（也可以用16进制表示颜色），设置border: 10px solid black;就是这样。

三、为什么布局总用div

这里提出一个小问题，有没有想过，为什么我们页面布局中，最常用的标签是div? p 标签不行吗？ul标签不行吗？span不行吗？

首先，span是行内元素，所以很难用它去布局整个页面。

而只有div标签是没有语义的。就是说没有原始样式。

我们把一段文字用一个p标签和ul 标签包裹，会发现ul很明显有原始样式，而p标签有自己的边距。

<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<ul>
   <li>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</li>
</ul>
<div>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>

当然你可以手动去掉这些，但是对于空白的页面来说，没有语义的元素对于布局来说会更加可控。

总结

好了，就讨论到这里，如果还有不懂的地方，可以查看MDN文档，具体属性忘记了也可以随时去上边查看。