类比

为了便于理解、记忆，看下图：

盒子模型

盒子模型包括：

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。

边框

设置方式一

div{
    border:2px  solid  red;
}

边框样式有：

solid（实线）
dashed（虚线）
dotted（点线）

边框颜色

可设置为十六进制颜色，如:

border-color:#888;

注意： 前面有 # 号

边框宽度

数字+px(象素)

设置方式二

单独设置某个边框

div{
    border-top:1px  solid blue;
    border-right:2px  solid green;
    border-bottom:3px solid red;
    border-left:4px  solid gray;
}

margin 外边距

元素与其它元素之间的距离

设置外边距方式一：

如果上、右、下、左的外边距相同，写法如下：

div{
    margin:10px;
}

设置外边距方式二：

如果上、右、下、左的外边距不同，写法如下：

div{
    margin:20px 10px 15px 30px;/*顺序：上、右、下、左*/
}

或者

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

内边距

元素内容与边框之间的距离

设置方式一：

如果上、右、下、左的填充都相同：

div{
    padding:20px;
}

设置方式二：

如果上、右、下、左的填充都不同：

div{
    padding:20px 10px 15px 30px;/*顺序：上、右、下、左(顺时针)*/
}

或者

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

宽度和高度

设置内容的宽度、高度

div {
    width: 300px;
    height: 100px;
}

实际宽度

元素实际宽度（盒子的宽度）=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

元素实际高度（盒子的高度）=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

原文出处：/show_1IX1GOYgpDy8.html

类比