本文共 1684 字，大约阅读时间需要 5 分钟。

【实例截图】

文件：（访问密码：551685）

以下内容无关：

-------------------------------------------分割线---------------------------------------------

每个盒子都可以看成由4部分组成，它们分别是 — 元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content）。

在这里插入图片描述

元素外边距（margin）

元素外边距（margin）用来控制元素与相邻元素之间间隔大小。

用法：

/上方对外边距12像素/

margin-top: 12px; /右方对外边距24像素/ margin-right: 24px; /下方对外边距6像素/ margin-bottom: 6px; /左方对外边距3像素/ margin-left: 3px; /上方、右方、下方、左方皆对外边距12像素/ margin: 12px; /上方、下方对外边距12像素 左方、右方对外边距24像素/ margin: 12px 24px; /上方对外边距12像素 右方对外边距24像素 下方对外边距6像素 左方对外边距3像素/ margin: 12px 24px 6px 3px; 按照left与right对应以及top与bottom对应，自动补充缺省值

/上方对外边距12像素 右方对外边距24像素 下方对外边距6像素 左方对外边距24像素/

margin: 12px 24px 6px; 水平方向相邻元素的margin值不会叠加

效果图： 在这里插入图片描述

垂直方向相邻元素margin值会叠加，最终以两者之间最大值为准

效果图： 在这里插入图片描述

利用margin属性使块级元素水平居中

Fatman

效果图： 在这里插入图片描述

元素边框（border）

元素边框（border）位于元素外边距与元素内边距之间。

用法：

/边框样式为实线/

border-style: solid; /边框宽度为12像素/ border-width: 12px; /边框颜色为黑色/ border-color: black; /边框角度为36像素/ border-radius: 36px; /边框宽度为12像素 样式为实线 颜色为黑色/ border: 12px solid black; border的属性也可以像margin一样根据上下左右设置，笔者就不再一一举例了。

利用边框颜色差设置3D按钮

按钮

效果图：

在这里插入图片描述

元素内边距（padding）

元素内边距（padding）是用来定义元素内容距离元素边框之间间隔大小。

内边距和外边距的区别在于 — 外边距位于边框外部，而内边距位于边框内部。

用法：

/上方对内边距12像素/

padding-top: 12px; /右方对内边距24像素/ padding-right: 24px; /下方对内边距6像素/ padding-bottom: 6px; /左方对内边距3像素/ padding-left: 3px; /上方、右方、下方、左方皆对内边距12像素/ padding: 12px; /上方、下方对内边距12像素 左方、右方对内边距24像素/ padding: 12px 24px; /上方对内边距12像素 右方对内边距24像素 下方对内边距6像素 左方对内边距3像素/ padding: 12px 24px 6px 3px; padding也可以按照left与right对应以及top与bottom对应，自动补充缺省值

/上方对内边距12像素 右方对内边距24像素 下方对内边距6像素 左方对内边距24像素/

padding: 12px 24px 6px; 使用padding增大元素的可点击范围

转载地址：http://hotyk.baihongyu.com/