HTML <img> 标签的 hspace 和 vspace 属性 详解
HTML <img> 标签的 hspace 和 vspace 属性
实例
设置文本中的图像的对齐方式：
<img src="phpcodeweb.gif" hspace="30" vspace="30" />
完整实例【亲自试一试】：
<html>
<body>
<h3>不带有 hspace 和 vspace 的图像：</h3>
<p>
<img src="/i/eg_logo_phpcodeweb.gif" align="middle" />
This is some text. This is some text. This is some text.
</p>
<h3>带有 hspace 和 vspace 的图像：</h3>
<p>
<img src="/i/eg_logo_phpcodeweb.gif" align="middle" hspace="30" vspace="30" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
<img> 标签的 hspace 和 vspace 属性可以设置图像周围的空间。
详细说明
通常图形浏览器不会在图像和其周围的文字之间留出很多空间。除非创建一个透明的图像边框来扩大这些间距，否则图像与其周围文字之间默认的两个像素的距离，对于大多数设计者来说是太近了。如果把图像放在超链接中，特殊颜色的边框会把你费尽心思留出的所有间距都占据了，而且还会使人们注意到文字与图像是多么接近。
hspace 和 vspace 属性可以给图像一个自由呼吸的空间。通过 hspace，可以以像素为单位，指定图像左边和右边的文字与图像之间的间距；而 vspace 值则是上面的下面的文字与图像之间的距离的像素数。
我们确信您同意这一点，也就是在这些图像周围留出额外的空间，会使文本更容易阅读，而且页面整体上看上去会更引人入胜。
浏览器支持
虽然不赞成使用 align，但是几乎所有浏览器都支持该属性。
提示和注释
提示：您可以在外部样式表中使用 CSS 的外边距属性和内边距属性，为站点上的所有图像设置一致的边距。与单独为一个图像设置 hspace 和 vspace 属性相比，这种方式无疑拥有更高的效率。
兼容性注释
不推荐使用 img 元素的 hspace 和 vspace 属性；在 HTML 4.01 Strict 以及 XHTML 1.0 Strict DTD 中，不支持 img 元素的 hspace 和 vspace 属性。
请使用 CSS 代替。
CSS 语法：<img style="margin: 0px 50px">
完整实例【CSS 实例：带有外边距的图像】：
<html>
<body>
<h3>不带有外边距的图像：</h3>
<p>
<img src="/i/eg_logo_phpcodeweb.gif" align="middle" />
This is some text. This is some text. This is some text.
</p>
<h3>左右外边距各为 50 像素的图像：</h3>
<p>
<img src="/i/eg_logo_phpcodeweb.gif" align="middle" style="margin:0px 50px" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在我们的 CSS 教程中，您可以找到更多有关 margin 属性 的细节。
语法
<img hspace="value" />
或者：
<img vspace="value" />
属性值
| 值 | 描述 |
|---|---|
| pixels | 以像素为单位的图像周围的空白。 |
TIY 实例
完整实例【<img> 标签的 hspace 和 vspace 属性】：
<html>
<body>
<h3>不带有 hspace 和 vspace 的图像：</h3>
<p>
<img src="/i/eg_logo_phpcodeweb.gif" align="middle" />
This is some text. This is some text. This is some text.
</p>
<h3>带有 hspace 和 vspace 的图像：</h3>
<p>
<img src="/i/eg_logo_phpcodeweb.gif" align="middle" hspace="30" vspace="30" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何使用 <img> 标签的 hspace 和 vspace 属性来增加图像周围的空白。
