盒模型-填充

元素內容與邊框之間是可以設定距離的，稱為「填滿」。填充也可分為上、右、下、左(順時針)。如下程式碼：

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>

繼續學習

新建檔案

<!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>

重置程式碼

自動運行

提交

預覽 Clear