在HTML5页面开发过程中，图文排版是高频出现的场景，图像位置偏移、文字和图片间距不合理是很多开发者常遇到的问题。掌握正确的图像定位方法和间距控制技巧，能快速实现符合设计要求的排版效果。
HTML5中图像的基础定位方式
1. 行内元素默认定位
当<img>标签直接放在文本内容中时，它属于行内替换元素，默认会和文字基线对齐，位置会跟随文本流自然排列。如果想要调整它在行内的垂直位置，可以通过CSS的vertical-align属性实现。
/* 让图片在行内垂直居中 */
img {
vertical-align: middle;
}
2. 块级元素定位
如果给<img>设置display: block属性，它会变成块级元素，默认占据一整行，此时可以通过margin、position等属性调整它的位置。
/* 块级图片水平居中 */
img.block-img {
display: block;
margin: 0 auto;
}
图文间距的控制方法
1. 使用margin控制间距
margin是最常用的间距控制属性，可以给图片设置上下左右的margin值，来调整它和周围文字的距离。如果是图片在文字左侧的排版，给图片设置右margin就能拉大图文水平间距。
/* 图片在文字左侧，右侧留20px间距 */
.img-left {
float: left;
margin-right: 20px;
width: 200px;
height: auto;
}
<div class="text-wrap">
<img src="demo.jpg" class="img-left" alt="示例图片">
<p>这里是和图片排版的文本内容，图片会在左侧显示，文字会自动环绕在图片右侧，通过调整margin-right的值可以改变图文之间的水平间距。</p>
</div>
2. 使用padding控制间距
如果图片有父容器，也可以给父容器设置padding，间接控制图片和周围文字的间距，这种方式适合图片需要带背景或者边框的场景。
.img-container {
padding: 15px;
background-color: #f5f5f5;
border-radius: 8px;
}
.img-container img {
width: 100%;
height: auto;
}
常见排版场景示例
文字环绕图片排版
通过float属性让图片浮动，文字会自动环绕在图片周围，此时可以通过margin调整图文间距，避免文字贴紧图片。
.float-right-img {
float: right;
margin-left: 20px;
margin-bottom: 10px;
width: 180px;
}
上下排列图文间距控制
当图片和文字上下排列时，给图片设置下margin或者给文字设置上margin，都能控制两者的垂直间距。
.vertical-img {
display: block;
width: 100%;
margin-bottom: 15px;
}
注意事项
- 行内图片的vertical-align属性默认是baseline，很多时候会出现图片底部和文字不对齐的情况，建议根据需求设置为middle、top或者bottom。
- 使用float浮动图片后，父容器可能会出现高度塌陷的问题，需要给父容器添加overflow: hidden或者清除浮动的处理。
- 间距数值建议使用px或者rem单位，避免在不同屏幕尺寸下出现间距异常的问题。
图文排版的核心是理解元素的显示类型，根据布局需求选择合适的定位方式，再配合margin、padding等属性调整间距，就能实现自然的排版效果。