边框border：
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{ border:2px solid red;}
上面是 border 代码的缩写形式，可以分开写：
div{ border-width:2px; border-style:solid; border-color:red;}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
div{ border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;
css代码：
div{ width:200px; padding:20px; border:1px solid red; margin:10px; }
html代码：
文本内容
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
margin属性包含了margin left ：距左元素块距离（设置距左内边距） ；margin top：距头顶(上)元素块距离（设置距顶部元素块距离）；margin right ：距右元素块距离（设置距右元素块距） ；margin bottom ：底元素块距离（设置距低（下）元素块距）。其二维构建图可见二维图。
如果是左右上下都需要设置margin的值时可以简写来实现，以优化css 。
如简写方式有：margin:10px; 意思就是上下左右元素块距离就是10px（10像素）等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 一样效果简写；margin:5px 10px; 意思上下元素块距离为5px，左右的元素块距离为10px，等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 一样效果简写；margin:5px 6px 7px; 意思上元素块距离5px，下元素块距离为7PX，左右元素块距离为6px，等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 一样效果简写； margin:5px 6px 7px 8px; 意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，等于等于margin-top:5px; margin-right:6px; margin-bottom:7px; margin-right:8px; 一样效果简写； 其中margin:5px 6px 7px 8px; 的转法为顺时针即图：如需转载，请注明文章出处和来源网址：
Padding属性包含了padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距右内边距） ；padding bottom ：底补距离（设置距低内边距）
padding left用法：padding-left:10px; 这个意思距离左边补距10像素，可跟百分比如（padding-left:10%; 距离左边补10%的距离）；
padding right用法：padding-right:10px; 这个意思距离右边补距10像素，可跟百分比如（padding-right:10%; 距离右边补10%的距离）；padding top用法：padding-top:10px; 这个意思距离顶边补距10像素，可跟百分比如（padding-top:10%; 距离顶边补10%的距离）；padding bottom用法：padding-bottom:10px; 这个意思距离低边补距10像素，可跟百分比如（padding-bottom:10%; 距离底边补10%的距离）；注意padding中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。如果是左右上下都需要设置padding的值时可以简写来实现，以优化css 。
如简写方式有：padding:10px; 意思就是上下左右补丁距离就是10px（10像素）等于padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; 一样效果简写；padding:5px 10px; 意思上下补丁距离为5px，左右的补丁距离为10px，等于padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; 一样效果简写；padding:5px 6px 7px; 意思上补丁距离5px，下补丁距离为7PX，左右补丁距离为6px，等于padding-top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px; 一样效果简写； padding:5px 6px 7px 8px; 意思上补丁为5px，右补丁距离为6px ，下补丁距离为7px，左补丁距离8px，等于等于padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px; 一样效果简写； 其中padding:5px 6px 7px 8px; 的转法为顺时针即图：