***留白 (padding) 是在內容外,邊框內的部分。***我們可以對盒子四個邊的留白逐一設定:
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
第五個屬性,padding,是用來作為同時設定四個邊留白的捷徑屬性。語法如下:
padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
順序非常重要。第一個值一定是上面留白的值,第二個值一定是右邊留白的值,第三個值一定是下面留白的值,而第四個值一定是左邊留白的值。
有三種方式可以設定留白,分別為長度、百分比、以及 'auto'。
如以下範例:
<!DOCTYPE html>
<html>
<head>
<title>CSS padding</title>
<meta charset="utf-8">
<style type="text/css">
#container {
padding-top:15px;
padding-left:10px;
padding-right:auto;
padding-bottom:40px;
border:1px solid pink;
}
</style>
</head>
<body>
<div id="container">
留白的例子。
</div>
</body>
</html>
成果如下圖: