所有HTML元素都可以看作盒子，在CSS中盒子模型是用来设计和布局的，CSS盒子模型本质上是一个盒子，分装周围的HTML元素包括：外边距，边框，内边距和实际内容。
Margin（外边距）
清除边框外的区域，外边距是透明的。
Border（边框）
围绕在内边距和内容外的边框。
Padding（内边距）
清楚内容周围的区域。
Content（内容）
盒子的内容，显示文本图像。
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于实物部分，内边距等同于盒子中的泡沫，边框等同于快递盒子，外边距等同于快递与快递之间的距离。
例：
首先添加内容
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div class="continer"></div>
</body>
添加内边距
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/}</style>
</head>
<body><div class="continer"></div>
</body>注：可以通过使用padding-left/right/top/bottom来实现单个边距的添加。
添加边框
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/}</style>
</head>
<body><div class="continer"></div>
</body>
添加外边距
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;padding: 50px 50px;/*第一个值表示上下内边距的大小，第二个值表示左右的大小*/border: 5px solid black;/*第一个值表示边框的粗细，第二个值表示实线，第三个之为边框的颜色*/margin: 100px 100px;/*第一个值表示上下外边距的大小，第二个值表示左右边距的大小*/ }</style>
</head>
<body><div class="continer"></div>
</body>
注： 可以使用margin-left/right/top/bottom来单个更改某一边距离。