盒模型-填充
元素內容與邊框之間是可以設定距離的,稱為「填滿」。填充也可分為上、右、下、左(順時針)。如下程式碼:
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>