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 © 2017   1keydata.com   版權所有