聊代码（第十一集）图片标签（之三）

在这集里，我要说说外边矩属性。当我们想在图片的上下左右某个边缘加些文字的时候，而且文字不在图片上，那就要给文字找个空间地方了，这个任务可以由外边矩属性来完成（见下图示）。

未添加文字前的效果见下图（我加了颜色背景，目的是使朋友们清楚地看到边矩情况）。

含有外边矩属性的图片标签（上图代码）：。

＜table align="center" background="//image109.360doc.com/DownloadImg/2018/06/0209/134649096_5_20180602095118207.jpg"＞ ＜tbody＞ ＜tr＞ ＜td＞＜img src="//image109.360doc.com/DownloadImg/2018/06/0209/134649096_2_20180602095117113.jpg" style="margin: 20px 80px 60px 10px;" /＞＜/td＞ ＜/tr＞ ＜/tbody＞ ＜/table＞

上面代码所描述的是上图的全部，包含有背景色标签及相关的尾标签，这些不在我们讨论的范围，我们只讨论图片标签中的外边矩属性代码（见下面所示）：

＜img src="//image109.360doc.com/DownloadImg/2018/06/0209/134649096_2_20180602095117113.jpg" style="margin: 20px 80px 60px 10px;" /＞

margin 表示外边矩属性，有以下四个方面的属值。

20px 即第一个属值，表示上边矩属值。

80px 即第二个属值，表示右边矩属值。

60px 即第三个属值，表示下边矩属值。

10px 即第四个属值，表示左边矩属值。

这里还要说清楚的是：假如只设置一个外边矩属值（例：margin: 20px），则表示四边一样，是等值的；假如设置了两个属值（例：margin: 20px 80px），则前者表示上下边矩，后者表示左右边矩；假如设置了三个属值（例：margin: 20px 80px 60px），则依次表示上、右、下外边矩属值。

表示外边矩属性还有另一种方式，见下面所示：

＜img src="//image109.360doc.com/DownloadImg/2018/06/0209/134649096_2_20180602095117113.jpg" style="margin-top: 20px;margin-right: 30px; margin-bottom: 50px;margin-left: 10px;" /＞

上面代码中的margin-top: 20px;margin-right: 30px; margin-bottom: 50px;margin-left: 10px;依次表示上边矩、右边矩、下边矩、左边矩各属值。

我们完全可以这样理解，外边矩属性对图片起定位作用，它能让图片所在的位置靠上些，靠下些，靠左些，靠右些。总之，它可以把图片摆在网页的任意位置上。

本主题由 静竹 于 7 天前 添加图标 版主推荐