最近在寫HTML元件時,想讓<fieldset></fieldset>元件置中,並且調整元件的寬度。

這時候CSS的margin屬性就派上用場了。

margin指的就是所套用的網頁元件與螢幕四周的距離,屬性值分別有以下幾種:

  1. margin-top (上邊界)
  2. margin-right (右邊界)
  3. margin-bottom (下邊界)
  4. margin-left (左邊界)

如果只想單純用 margin 來寫屬性,可以將四個屬性寫在一起,順序剛好是上面所述,中間只需空白分隔。

margin: 10 px 10 px 10 px 10px;

下列是簡單的範本,寫在

<div id="container">
Test
</div>

使用下列CSS語法,可以試試看,感受一下margin的意義。

#container {
margin-top:5px;
margin-left:15px;
margin-right:25px;
margin-bottom:35px;
border: 1px solid 000000;
} 

 

知道margin用法後,就可以用margin來調整網頁元件讓其置中:

#container {
margin: 0px auto;
border: 1px solid 000000;
} 
arrow
arrow
    文章標籤
    CSS margin CSS margin置中
    全站熱搜

    葛瑞斯肯 發表在 痞客邦 留言(0) 人氣()