剖析盒子模型

一、什么是CSS盒子模型

通俗一点，CSS盒子模型由外边距（margin）、边框（border）、内边距（padding）、元素内容（content）组成，请见下图：

剖析盒子模型

二、盒子模型中margin、border、padding、content的各自作用

（1） margin：

自己的理解

控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。注意：行内元素是木有margin-top、margin-bottom的。

CSS权威指南

边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

下面通过具体的demo初步来瞧瞧margin的作用，比如有两个块级元素，如div，在它们margin都设置为0时，效果是这样的：

 1 <!DOCTYPE html>
 2     <head>
 3         <title>no_margin</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5         <style>
 6             * {
 7                 margin:0;
 8                 padding:0;
 9             }
10             div {
11                 width:80px;
12                 height:80px;
13                 line-height:80px;
14                 text-align:center;
15             }
16             .div1 {
17                 background:#9FCD82;
18             }
19             .div2 {
20                 background:#C8ECCC;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="div1">
26             div1
27         </div>
28         <div class="div2">
29             div2
30         </div>
31     </body>
32 </html>

View Code