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（你正在看 第一頁）

:

第一頁

第二頁

第三頁