CSS教學-CSS 語法教學11-留白

我們從盒子模式那一頁看到，留白 (padding) 是在內容外，邊框內的部分。一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：

padding-top (上)

padding-right (右)

padding-bottom (下)

padding-left (左) 第五個屬性，padding，是用來作為同時設定四個邊留白的捷徑屬性。
有三種方式可以設定留白，分別為長度、百分比、以及 'auto'。我們來看以下的例子：

#container {   padding-top:15px;   padding-left:10px;   padding-right:30px;   padding-bottom:40px;   border: 1px solid 000000; }

以下的 HTML碼，

<div id="container"> 這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。 </div>

會顯示出，

這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。

在這裡，上面的留白為 15px，左邊的留白為 10px，右面的留白為 30px，而下面的留白為 40px。

留白捷徑

所有四個邊的留白可以同時由 padding 屬性設定。它的語法如下：
padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
在這裡，順序非常重要。第一個值一定是上面留白的值，第二個值一定是右邊留白的值，第三個值一定是下面留白的值，而第四個值一定是左邊留白的值。

本文章轉貼自：http://freeshare2u.com/