CSS基礎教學(13)--內邊界與外邊界

內邊界與外邊界屬性, 跟框線很像, 有針對各邊單獨設定的屬性, 也有一次設定四邊的屬性, 下面是各屬性的列表

padding
padding-bottom
padding-left
padding-right
padding-top

margin
margin-bottom
margin-left
margin-right
margin-top

來看看它們的語法

內邊界(padding)

padding-方位 : 邊界值 | inherit | auto ;
或
padding : 邊界值{1,4} | inherit | auto ;

邊界值可以用所有 CSS 長度單位
{1,4} 的觀念請參考[CSS基礎教學(12)--設定框線]

例如
<SPAN style=" padding:30px 60px 90px 120px; border:1px solid red; "> 一次對四個方位做內邊界設定 </SPAN> &nbsp; <SPAN style=" padding-top:30px; padding-right:60px; padding-bottom:90px; padding-left:120px; border:1px solid red; "> 以各方位屬性來設定內邊界 </SPAN>

這兩種寫法效果是一樣的

外邊界(margin)
設定外邊界的語法如下
margin-方位 : 邊界值 | inherit | auto ;
或
margin : 邊界值{1,4} | inherit | auto ;

內外邊界的語法, 只差在 padding 與 margin 這兩個字而已

例如

<SPAN style="border:1px solid red;"> <SPAN style=" margin:30px 60px 90px 120px; border:1px solid red; "> 一次對四個方位做外邊界設定 </SPAN> </SPAN> &nbsp; <SPAN style="border:1px solid red;"> <SPAN style=" margin-top:30px; margin-right:60px; margin-bottom:90px; margin-left:120px; border:1px solid red; "> 以各方位屬性來設定外邊界 </SPAN> </SPAN>

這兩種寫法的效果也是一樣的, 這個例子中, 外面又多加了一個 SPAN 標籤, 主要是為了看出外邊界的效果, 不過若你是用 Firefox 來看的話, 會發現上下邊界並沒有效果, 原因我也不清楚 ^__^" , 希望知道的網友可以指點迷津, 謝啦 ^__^

下面用另一個例子來展現效果
<DIV style="border:1px solid red;"> <DIV style=" margin:30px 60px 90px 120px; border:1px solid red; "> 一次對四個方位做外邊界設定 </DIV> </DIV> &nbsp; <DIV style="border:1px solid red;"> <DIV style=" margin-top:30px; margin-right:60px; margin-bottom:90px; margin-left:120px; border:1px solid red; "> 以各方位屬性來設定外邊界 </DIV> </DIV>

不過, 這兩種屬性跟 width 及 height 屬性在搭配時, 又會產生出很多的問題, 而且不同瀏覽器的解讀也不盡相同, 這些我還沒有整理, 這裡就先不談了(偷懶一下 ^__^" )

--gs--
{CSS基礎教學}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。