html 測試 上入 下出

html 測試 左右 各一 測試

html 測試 單入 單出

html 測試 左入右出

class="ot"









尾部連結 hbbb(xx)

2018年4月16日 星期一

CSS margin 屬性與用法範例

CSS margin 外距距離


CSS margin : 屬性用來定義一個區域 例如 DIV  span img 等 的外邊界距離 外距距離,與常用的 padding(內距)剛好不同。margin 可以讓你一次設定四個邊的外距,也可以分別設定每個邊不同的外距,特別的是 margin 可以設定負値。

margin : [上] [右] [下] [左]   ;    margin : [上下] [左右]
margin : [上] [左右] [下]       ; margin : [四個邊同樣値]

CSS margin 的四個邊獨立寫法 :  margin-top:與上方元素的距離
                                                       margin-right:與右方元素的距離
                                                       margin-bottom:與下方元素的距離
                                                       margin-left:與左方元素的距離

margin 可以的值有 auto、長度單位與 %,各種値應用範圍不一定相同
margin:auto; //代表讓瀏覽器自己去設定。
margin:長度單位; //就是給數字跟單位,單位可以是 em、px、pt 等値。
margin:%; //讓瀏覽器自己去設定,跟邊界元素有關。

<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin: 5px 10px 20px 40px; border: 5px solid red;"> </div></div>
這是邊界的例子 margin: 5px 10px 20px 40px 

<div style="border: 5px solid blue;width:50%;height:150px">
<div style="margin-top: -20px; border: 5px solid red;"> </div></div>
這是邊界的例子 margin-top: -20px 


00

沒有留言:

張貼留言