HTML中仅单个img标签设置vspace属性为何作用于全部三张图片？

你看到的三张图都向下偏移，不是vspace属性错误作用到了前两张图上，是HTML行内元素的默认排版规则导致的：

• 先明确vspace的实际效果：这是已经被废弃的HTML非标准属性，作用是仅给当前设置了属性的元素，在顶部、底部各添加指定像素值的垂直外边距。你给最后一张图设置vspace=20，只会给这张图上下各加20px外边距，这张图本身占据的总高度从原本的200px变成了240px。
• 三个<img>标签默认是行内替换元素，你没有给它们加换行、浮动或者块级化设置，三个图片和前后的文本会排在同一个行盒里，而行盒的高度默认由当前行内最高的元素决定。最后一张图因为加了vspace总高度更高，直接把整行的显示高度撑大了。
• 行内元素默认的垂直对齐规则是和文本基线对齐（对应CSS属性vertical-align: baseline），当整行高度被撑高后，前两张图会按照基线对齐的规则自动向下偏移适配新的行高，最终看起来就像三张图都加了向下偏移的效果。

验证方式 #

你可以给前两张图加上align="top"属性，或者全局给img设置CSS样式img {vertical-align: top;}，再刷新页面就能看到前两张图会贴齐行的顶部，只有最后一张图带着上下20px的间距，就能证明偏移是行对齐规则导致的，不是vspace的生效范围出了问题。

推荐写法 #

vspace和对应的水平间距属性hspace早就被Web标准废弃，不建议继续使用，垂直间距需求直接用CSS的margin属性实现更可控，也能避免这类意料之外的排版问题：

<!DOCTYPE html>
<html>
<head>
<style>
img {
  /* 统一设置行内图片的对齐方式，避免基线对齐导致的意外偏移 */
  vertical-align: top;
}
.star-with-margin {
  /* 给需要间距的图片单独设置上下外边距，替代vspace属性 */
  margin: 20px 0;
}
</style>
</head>
<body>
    <br> Can you see the stars
    <img src="stars.jpg" height="200" width="200">
    <img src="stars.jpg" height="200" width="200">
    <img src="stars.jpg" height="200" width="200" class="star-with-margin">
    Can you see the stars?
</body>
</html>

内容的提问来源于stack exchange，提问作者Kedo