CSS 邊界



CSS 教學  >  邊界

如我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以我們可以對這四個邊逐一設定:

  • margin-top (上邊界)
  • margin-right (右邊界)
  • margin-bottom (下邊界)
  • margin-left (左邊界)

    第五個屬性,margin,是用來作為同時設定四個邊的捷徑屬性。

    有三種方式可以設定邊界,分別為長度、百分比、以及 'auto'。我們來看以下的例子:

    #container {
    margin-top:5px;
    margin-left:10%;
    margin-right:auto;
    margin-bottom:20px;
    border: 1px solid 000000;
    }

    以下的 HTML 碼,

    <div id="container">
    這是邊界的例子。
    </div>

    會顯示為,

    這是邊界的例子。

    在這裡,上邊界為 5px,左邊界為 10%,下邊界為 20px。

    邊界捷徑

    所有四個邊的邊界可以同時由 margin 屬性設定。它的語法如下:

    margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

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

    下一頁: CSS 邊框




    Copyright © 2016   1keydata.com   版權所有