所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。
一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个部分组成，如下图所示：![]()
一个盒子的实际宽度（或高度）是由content+padding+border+margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边的各自的border、padding和margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。
盒子模型的这4个组成部分再直接点展示为下图：![]()
结合上图，具体来说，即margin指的是元素与元素之间的距离；padding用于控制content与border之间的距离；border一般用于分离元素，border的外围即元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。