螞蟻的 CSS: margin 第二頁

2013/01/08

margin 第二頁

margin | margin-bottom, margin-left, margin-right, margin-top

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

分別設定元件矩框的上右下左外緣寬度，可為負值，預設值為 0。可設為：

長度：設定外緣寬度。
百分比：相對於包納矩框的寬度的百分比，作為外緣寬度。
auto：系統決定，此為預設值。
inherit：繼承父元件的特徵值。

風格用法：
<div style='width:350px; height:300px; background:#733'>
<img  style='margin-top:20px;
             margin-left:-20px;
             margin-right:10%;
             padding:0;
             border:solid red 4px;
             outline:solid white 4px'
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
外緣<hr />
</div>

<br />
<div style='width:350px; height:300px; background:#733'>
<img  style='margin-left:-10000px;
             border:solid red 4px;
             outline:solid white 4px'
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" />
外緣<hr />
</div>
執行結果：
外緣

外緣

上例中，第二張圖設了 margin-left:-10000px，所以圖被移到視區之外。有時候你會用到這個方法藏圖，然後再用 javascript 修改 margin 將圖變回來。

margin（你正在看第二頁）

: