CSS样式中padding、border和margin

盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。

1、盒子模型的概念

　　所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。
　　 一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这4个部分组成。

 

padding是指内容与容器边界的距离；

border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入(通常的width是是content+padding,具体跟浏览器有关)；

margin是指容器与容器之间的间距。

 

比如下面这个例子：

 
  
 
 
  

   

    We can read of things that happened 5,000 years ago in the Near East, where people first learned to write
   

   

Next paragraph

  

 

 

浏览效果如下：