概念
margin: 用于控制元素与元素之间的距离;
margin 的最基本用途就是控制元素周围空间的间隔,
从视觉角度上达到相互隔开的目的.
padding: 用于控制内容与边框之间的距离;
Border(边框): 围绕在内边距和内容外的边框.
Content(内容): 盒子的内容, 显示文本和图像.
margin 外边距
- .margin-test {
- margin-top:5px;
- margin-right:10px;
- margin-bottom:15px;
- margin-left:20px;
- }
推荐使用简写:
顺序: 上右下左
- .margin-test {
- margin: 5px 10px 15px 20px;
- }
常见的居中方式:
- .mycenter {
- margin: 0 auto;
- }
padding 内填充
- .padding-test {
- padding-top: 5px;
- padding-right: 10px;
- padding-bottom: 15px;
- padding-left: 20px;
- }
推荐使用简写:
顺序: 上右下左
- .padding-test {
- padding: 5px 10px 15px 20px;
- }
补充 padding 的常用简写方式:
提供一个, 用于四边;
提供两个, 第一个用于上 - 下, 第二个用于左 - 右;
如果提供三个, 第一个用于上, 第二个用于左 - 右, 第三个用于下;
提供四个参数值, 将按上 - 右 - 下 - 左的顺序作用于四边;
来源: http://www.bubuko.com/infodetail-2942125.html