HTML+CSS 輕鬆入門之盒子模型之填充

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

下面我們寫一個實例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
       width:200px;
       height:100px;
       border:1px solid red;
       padding:10px 10px 10px 10px;
      }
  </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>

其實也可以這麼寫

div{
    padding-top:10px;
    padding-right:10px;
    padding-buttom:10px;
    padding-left:10px;
}

如果都是同樣也可以這樣寫

padding:10px;

順序是上 右 下 左 

如果上下值相同,左右值相同,可以這樣寫

padding:10px 20px;

繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red; padding:10px 10px 10px 10px; } </style> </head> <body> <div>php中文网</div> </body> </html>