margin
margin：[ <length> | <percentage> | auto ]{1,4} 为元素设置所有四个方向（上右下左）的外边距
- auto：水平（默认）书写模式下，vertical-margin计算值为
0，horizontal-margin取决于包含块的剩余可用空间 - <length>：用长度值来定义外补白。可以为负值
- <percentage>：用百分比来定义外补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值
margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，
第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>margin_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { margin: 10px 20px 40px 80px; background: #eee; } </style> </head> <body> <div class="test">注意我距上、右、下、左的距离</div> </body> </html>
padding
padding：[ <length> | <percentage> ]{1,4} 为元素设置所有四个方向（上右下左）的内边距
- <length>：用长度值来定义内补白。不允许负值
- <percentage>：用百分比来定义内补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，不允许负值
padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，
第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .test { float: left; padding: 10px; border: 1px solid #000; } </style> </head> <body> <div class="test">注意我离4条边框线的距离</div> </body> </html>