CSS 留白



CSS 教學  >  留白

我們從盒子模式那一頁看到,留白 (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: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]

    在這裡,順序非常重要。第一個值一定是上面留白的值,第二個值一定是右邊留白的值,第三個值一定是下面留白的值,而第四個值一定是左邊留白的值。

    下一頁: CSS 背景



    Copyright 1keydata.com 2007, 2008, All Rights Reserved.



  • CSS 語法教學
    CSS 語法
    CSS 套用方式
    CSS 媒體類別
    CSS 串接
    CSS 繼承
    CSS Class 與 ID
    CSS Div 與 Span
    CSS 長度單位

    CSS 盒子模式
    CSS 邊界 (Margin)
    CSS 邊框 (Border)
    CSS 留白 (Padding)
    CSS 背景 (Background)
    CSS 顏色
    CSS 字體
    CSS 連接
    CSS 清單 (List)
    CSS 表格 (Table)
    CSS 位置 (Position)
    CSS 文字 (Text)
    CSS 浮動 (Float)
    CSS 清除 (Clear)
    CSS 滑鼠游標圖案

    CSS 樣式