一、padding
设置 p 元素的 4 个内边距：
p{ padding:2cm 4cm 3cm 4cm;}
复制代码
所有浏览器都支持 padding 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法padding 简写属性在一个声明中设置所有内边距属性。
说明：这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注：不允许使用负值。
例子 1
padding:10px 5px 15px 20px;
复制代码
上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px
例子 2
上内边距是 10px，右内边距和左内边距是 5px，下内边距是 15px。
例子 3
上内边距和下内边距是 10px，右内边距和左内边距是 5px。
例子 4
所有 4 个内边距都是 10px
二、margin
定义和用法margin 在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
例子 1
margin:10px 5px 15px 20px;
复制代码
上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px
例子 2
上外边距是 10px，右外边距和左外边距是 5px，下外边距是 15px。
例子 3
上外边距和下外边距是 10px 右外边距和左外边距是 5px
例子 4
所有 4 个外边距都是 10px
三、拓展阅读 纯 CSS 画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
正方形
#square { width: 100px; height: 100px; background: red;}
复制代码
长方形
#rectangle { width: 200px;height: 100px;background: red; }
复制代码
圆形
.circle { width: 100px; height: 100px; background: red; border-radius: 50px; }
复制代码
椭圆
.oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; }
复制代码
上三角
.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }
复制代码
下三角
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}
复制代码
左上三角
.triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }
复制代码
右上三角
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
复制代码
左下三角
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }
复制代码
右下三角
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent;}
复制代码
左三角
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}
复制代码
右三角
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;}
复制代码
平行四边形
.parallelogram { width: 150px; height: 100px; margin-left:20px; transform: skew(20deg); background: red; }
复制代码
梯形
.trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
复制代码
六角星
.star-six { position: relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } .star-six:after { content: ""; position: absolute; top: 30px; left: -50px; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
复制代码
五角星
.star-five { position: relative; margin: 50px 0; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate(35deg); } .star-five:before { content: ''; position: absolute; top: -45px; left: -65px; border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 0; display: block; transform: rotate(-35deg); } .star-five:after { content: ''; position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate(-70deg); }
复制代码
五角大楼
.pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; } .pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red; }
复制代码
六边形
.hexagon { position: relative; width: 100px; height: 55px; background: red; } .hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } .hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }
复制代码
八角形
.octagon { position: relative; width: 100px; height: 100px; background: red; } .octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } .octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
复制代码
爱心
.heart { position: relative; width: 100px; height: 90px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin :100% 100%; }
复制代码
无穷大符号
.infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; border-radius: 50px 50px 0 50px; transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; border-radius: 50px 50px 50px 0; transform: rotate(45deg); }
复制代码
鸡蛋
.egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
复制代码
食逗人（Pac-Man）
.pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }
复制代码
提示对话框
.talkbubble { position: relative; width: 120px; height: 80px; background: red; border-radius: 10px; } .talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }
复制代码
12 角星
.burst-12 { background: red; width: 80px; height: 80px; position: relative; text-align: center; } .burst-12:before, .burst-12:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; } .burst-12:before { transform: rotate(30deg); } .burst-12:after { transform: rotate(60deg); }
复制代码
钻石
.cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; } .cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; }
复制代码
阴阳八卦
.yin-yang { position: relative; width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; } .yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; } .yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; }
复制代码
评论