margin 第二頁

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

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

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

1. 長度：設定外緣寬度。
2. 百分比：相對於包納矩框的寬度的百分比，作為外緣寬度。
3. auto：系統決定，此為預設值。
4. 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="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/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="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> 外緣<hr /> </div>

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

margin（你正在看 第二頁）

:

第一頁

第二頁

第三頁