html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

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

沒有留言:

張貼留言