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

  • 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 樣式