欢迎使用CSDN-markdown编辑器

一、盒子模型内容范围包括：margin、border、padding、content

主要属性包括：width、height、padding、border、margin
1. width: 内容的宽度
2. height：内容的高度
3. padding：内边距
4. margin： 外边距

二、属性使用

2.1 margin

示例：

margin: 10px;

• 四个外边距都是10px

margin: 10px 5px;

• 上下外边距：10px
• 左右外边距：5px

margin： 20px 10px 5px;

• 上外边距：20px
• 右外边距：10px
• 下外边距：5px
• 左外边距与右外边距相同：10px

margin: 20px 15px 10px 5px;

• 上外边距： 20px
• 右外边距：15px
• 下外边距： 10px
• 左外边距: 5px

---

• margin-top: 设置上外边距
• margin-right: 设置右外边距
• margin-buttom: 设置下外边距
• margin-left: 设置左外边距

注意： 当两个垂直的外边距相遇时，将会合并为一个外边距，合并后的高度为这两个外边距中的较大者。

2.2 border

示例

border: 1px solid red;

分别设置了: border-width、 border-style、 border-color

• border-width: 设置边框宽度，默认值为medium, 可选项，thin、medium、thick、length(自定义长度)、
• border-style：设置边框样式
• border-color：设置边框颜色

同时css3还新增了边框样式，如下

• border-radius：圆角边框
• border-shadow：边框背景
• border-image：边框图片

2.3 padding: 内边距

padding: 10px; 

• 四个内边距都是10px

padding: 20px 10px;

• 上下内边距20px，左右内边距10px

padding: 20px 15px 10px;

• 上内边距20px，右内边距15px，下内边距10px，左因为缺省与右相等，则为10px

padding: 20px 15px 10px 5px;

• 上20px　右15px　下10px 　左5px

---

设置单个方向的值：
+ padding-left 设置内容距离左内边框距离
+ padding-right 设置内容距离右内边框距离
+ padding-top 设置内容距离上内边框距离
+ padding-bottom 设置内容距离下内边框距离

---

注意： 根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的, 但IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。