Margin、Border、Padding、Content详解

在页面排版时，时常会遇到Margin、Border、Padding、Content对页面进行排版的，在css中，这几个是盒子模型（Box Model）中的一些相关属性。下面先来了解一下盒子模型的基本概念：

Margin（外边距）：边框外的区域，外边距是透明的；

Border（边框）：围绕在内边距和内容外的边框；

Padding（内边距）：清除内容周围的区域，也是透明的；

Contnet（内容）：盒子的内容，可显示图片或文本。

margin:50px;
Border:10px solid red;
padding:30px;

margin：10px 5px 15px 20px;//上外边距10px，右外边距5px，下外边距15px，左外边距20px。
margin:10px 5px 15px;//上10；左右5；下15
margin:10px 5px;//上下10；左右5
margin:5px;//上下左右5