利用图片外边距定位的代码分析

外边距？

         外边距（margin）是指围绕在元素边框的空白区域 。外边距有上外边距、右外边距、下外边距和左外边距。

margin属性：在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。如果设置四个值（如：margin:10px 5px 15px 20px），其顺序为：上外边距、右外边距、下外边距、左外边距；如果设置三个值，其顺序为：上外边距 、右外边距和左外边距、下外边距；如果设置两个值，其顺序为：上外边距 和下外边距、右外边距和左外边距；如果设置一个值，是指所有的 4 个外边距。
        应用举例：

        代码：

<table border="0" cellPadding="0">
<tbody>
<tr>
<td><img style="border-width: 0px; margin: 0px 100px 0px 0px; width: 300px; height: 200px;" title="图片外边距－－。春天没来。" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/0707/29434364_1.gif">

</td>

<td><img style="border-width: 0px; margin: 0px 0px 0px 100px; width: 300px; height: 200px;" title="图片外边距－－。春天没来。" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/0707/29434364_1.gif">

</td> 
</tr>

<tr>
<td><img style="border-width: 0px; margin: 10px 0px 10px 100px; width: 300px; height: 200px;" title="图片外边距－－。春天没来。" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/0707/29434364_1.gif">

</td><td><img style="border-width: 0px; margin: 10px 100px 10px 0px; width:300px; height: 200px;" title="图片外边距－－。春天没来。" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/0707/29434364_1.gif">

</td> 
</tr>

<tr>
<td><img style="border-width: 0px; margin: 0px 100px 0px 0px; width: 300px; height: 200px;" title="图片外边距－－。春天没来。" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/0707/29434364_1.gif">

</td><td><img style="border-width: 0px; margin: 0px 0px 0px 100px; width: 300px; height: 200px;" title="图片外边距－－。春天没来。" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/0707/29434364_1.gif">

</td> 
</tr>
</tbody></table>

        代码解析：

        上面的代码，设置了一个三行二列的表格。

        表格的第一行，每个单元格放入了一个图片，图片的右外边距为100px,其余的外边距都为0px。

        表格的第二行，每个单元格放入了一个图片，图片的上下外边距都是10px,左外边距是100px，右外边距是0px。

        表格的第三行，每个单元格放入了一个图片，图片的右外边距为100px,其余的外边距都为0px。

        效果赏析：

        由于给三组图片设置了不同的外边距，六个图片组成了一幅美丽的画面。