```markdown

CSS 文字和图片的间距调整

在网页设计中，调整文字与图片之间的间距是一项常见且重要的任务。通过合理的间距设置，可以提升页面的可读性与视觉效果。本文将介绍如何使用CSS来调整文字和图片之间的间距。

1. 使用 margin 调整间距

CSS 中，margin 属性用于设置元素的外边距。你可以通过调整图片或文字的 margin 值，来控制它们之间的间距。

示例：

```html

这是文字与图片之间的间距。

```

在这个示例中，我们为图片设置了一个右边距 margin-right: 20px，并为文字设置了一个左边距 margin-left: 20px。这样就可以确保图片和文字之间有20px的间距。

2. 使用 padding 增加内容内边距

与 margin 不同，padding 用于控制元素内容与边框之间的距离。如果你希望图片内部的内容与边框有间距，或者文字周围的间距调整，可以使用 padding。

示例：

```html

这是文字与图片之间的间距。

```

在这个例子中，通过给图片和文字分别设置内边距 padding-right 和 padding-left，我们可以在图片和文字内容之间创造出更为细腻的间距效果。

3. 使用 vertical-align 调整垂直对齐

如果图片和文字出现在同一行，并且需要调整它们在垂直方向上的对齐方式，vertical-align 是一个非常有用的属性。

示例：

```html

这段文字与图片垂直居中对齐。

```

这里，我们将图片的 vertical-align 属性设置为 middle，这样图片与文字就会垂直居中对齐。你也可以根据需求使用 top, bottom, 或 baseline 等值来调整对齐方式。

4. 结合 float 属性

float 属性可以让图片和文字实现环绕布局。当你希望文字环绕图片时，float 是一种有效的布局方式。

示例：

```html

这段文字环绕在图片的旁边。通过设置图片的右边距，我们可以确保文字不会与图片紧贴。

```

在此示例中，图片通过 float: left 属性浮动在页面的左侧，文字围绕在图片的右侧，并且通过 margin-right: 15px 保证文字不会与图片紧挨在一起。

5. 小结

通过灵活使用 CSS 的 margin, padding, vertical-align 和 float 属性，我们可以轻松地调整文字和图片之间的间距。这不仅能改善页面布局，还能提高网页的可读性和用户体验。

• margin 用于设置元素外部的间距。
• padding 用于设置元素内容与边框之间的间距。
• vertical-align 用于调整垂直对齐方式。
• float 用于实现文字环绕图片的效果。

根据具体需求的不同，选择合适的方式调整文字与图片之间的间距，可以大大提升网页设计的质量。 ```