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

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

margin

可以一次設定元件矩框的上 右 下 左外緣寬度。外緣是指元件的邊線與外界內容的距離，此區間為透明。個別的設定值請參考後面的說明。此特徵可設為：

1. 依上 右 下 左秩序，設定外緣寬度：只設一個值時，四邊同寬。少於四個值時，取左右相同，與上下相同。可設負值。
2. inherit：繼承父元件的特徵值。

<div style='width:350px; height:300px; background:#733'> <img style='border:solid red 4px; padding:0; 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:20px 40px; padding:0; background:blue; 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='overflow:visible; width:350px; height:300px; background:#733'> <img style='margin:-20px; 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>

• 上例中，第二張圖與第三張圖有設 margin，而且第三張圖設了負值。這第三張圖超出父元素矩形格子的部分，在 IE6 會被切去；在 Firefox, Safari, Chrome 會顯示出來。還要請注意 IE6 沒有 outline。

margin 用在區塊元素的水平置中。下例將小方塊設為 margin:0px auto，就可以在父元素的矩格 水平置中。 <div style='width:300px; height:150px; background:#733'> <div style='margin:0 auto; width:100px; height:100px; background:blue'></div> </div>

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 將圖變回來。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {margin:0px;} .hvr:hover {margin:20px;} .hvr:active {margin:40px;} </style> <div style='width:300px; height:300px; background:#733'> <img class=hvr src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> <hr /> </div>

javascript 應用。可以用 style 物件 的特徵 margin, marginBottom, marginLeft, marginRight, marginTop 讀取或設定特徵值。 <div id='atr3' style='margin:1px 5px 9px 11px;background:red; width:200px; height:150px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲. </div> <script type='text/javascript'> var os=document.getElementById('atr3').style; document.write( os.margin +'<br />'+ os.marginTop +'<br />'+ os.marginRight +'<br />'+ os.marginBottom +'<br />'+ os.marginLeft ); </script>