盒模型-填充
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码:
div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; }
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>填充</title> <style type="text/css"> #box1{ width:100px; height:100px; padding:10px; border:1px solid red; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html>