可以一次設定元件矩框的上 右 下 左外緣寬度。外緣是指元件的邊線與外界內容的距離，此區間為透明。個別的設定值請參考後面的說明。此特徵可設為：
- 依上 右 下 左秩序，設定外緣寬度：只設一個值時，四邊同寬。少於四個值時，取左右相同，與上下相同。可設負值。
- inherit：繼承父元件的特徵值。
- 風格用法：
<div style='width:350px; height:300px; background:#733'>
<img style='border:solid red 4px;
padding:0;
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:20px 40px;
padding:0;
background:blue;
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='overflow:visible;
width:350px;
height:300px;
background:#733'>
<img style='margin:-20px;
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> - 執行結果：
外緣
外緣
外緣
- 上例中，第二張圖與第三張圖有設 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（你正在看 第一頁） | : | 第一頁 | 第二頁 | 第三頁 |
