图像的左右空和上下空

---

实例

设置文本中的图像的对齐方式：

<网页>
<主体>
<标题3>不带有 左右空 和 上下空 的图像：</标题3>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_logo_w3school.gif“ 水平对齐=“中间“ />
这是一些文字这是一些文字这是一些文字这是一些文字
</段落>
<标题3>带有 左右空 和 上下空 的图像：</标题3>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_logo_w3school.gif“ 水平对齐=“中间“ 左右空=“30“ 上下空=“30“ />
这是一些文字这是一些文字这是一些文字这是一些文字
</段落>
</主体>
</网页>

---

 

定义和用法

 

<图像> 标签的 左右空 和 上下空 属性可以设置图像周围的空间。

 

详细说明

 

通常图形浏览器不会在图像和其周围的文字之间留出很多空间。除非创建一个透明的图像边框来扩大这些间距，否则图像与其周围文字之间默认的两个像素的距离，对于大多数设计者来说是太近了。如果把图像放在超链接中，特殊颜色的边框会把你费尽心思留出的所有间距都占据了，而且还会使人们注意到文字与图像是多么接近。

 

左右空 和 上下空 属性可以给图像一个自由呼吸的空间。通过 左右空，可以以像素为单位，指定图像左边和右边的文字与图像之间的间距；而 上下空 值则是上面的下面的文字与图像之间的距离的像素数。

 

我们确信您同意这一点，也就是在这些图像周围留出额外的空间，会使文本更容易阅读，而且页面整体上看上去会更引人入胜。

---

浏览器支持

虽然不赞成使用 水平对齐，但是几乎所有浏览器都支持该属性。

---

提示和注释

提示：您可以在外部样式表中使用 层叠样式表 的外边距属性和内边距属性，为站点上的所有图像设置一致的边距。与单独为一个图像设置 左右空 和 上下空 属性相比，这种方式无疑拥有更高的效率。

---

兼容性注释

不推荐使用 图像 元素的 左右空 和 上下空 属性；在 HTML 4.01 Strict 以及 XHTML 1.0 Strict DTD 中，不支持 图像 元素的 左右空 和 上下空 属性。

请使用 层叠样式表 代替。

层叠样式表 语法：<图像 样式="外边距: 0像素 50像素">

层叠样式表 实例：带有外边距的图像

<网页>
<主体>
<标题3>不带有外边距的图像：</标题3>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_logo_w3school.gif“ 水平对齐=“中间“ />
用中文写网页代码，用中文写网页代码，用中文写网页代码，
</段落>
<标题3>左右外边距各为 50 像素的图像：</标题3>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_logo_w3school.gif“ 水平对齐=“中间“ 样式=“外边距:0像素 50像素“ />
用中文写网页代码，用中文写网页代码，用中文写网页代码，
</段落>
</主体>
</网页>

---

语法

<图像 左右空="值" />

或者：

<图像 上下空="值" />

属性值

值	描述
像素	以像素为单位的图像周围的空白。

---

 实例

<图像> 标签的 左右空 和 上下空 属性

本例演示如何使用 <图像> 标签的 左右空 和 上下空 属性来增加图像周围的空白。

<网页>
<主体>
<标题3>不带有 左右空 和 上下空 的图像：</标题3>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_logo_w3school.gif“ 水平对齐=“中间“ />
用中文写网页代码，用中文写网页代码，用中文写网页代码，
</段落>
<标题3>带有 左右空 和 上下空 的图像：</标题3>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_logo_w3school.gif“ 水平对齐=“中间“ 左右空=“30“ 上下空=“30“ />
用中文写网页代码，用中文写网页代码，用中文写网页代码，
</段落>
</主体>
</网页>

---

 

---