如何让img标签和p标签在同一行

在 HTML 中，`img` 标签和 `p` 标签默认是块级元素，即它们会独占一行。要让它们在同一行上显示，可以使用以下方法：

1. 将 `img` 标签和 `p` 标签都设置为 `display: inline` 或 `display: inline-block`，这样它们就可以像文本一样在同一行上显示。例如：

<img src="image.jpg" alt="image" style="display: inline-block;">
<p style="display: inline-block; margin-left: 10px;">这是一段文本。</p>

2. 使用浮动（`float`）属性来实现。例如，将 `img` 标签设置为 `float: left`，并且给 `p` 标签设置一个左边距（`margin-left`）来避免文字与图片重叠。例如：

<img src="image.jpg" alt="image" style="float: left;">
<p style="margin-left: 10px;">这是一段文本。</p>

需要注意的是，使用浮动属性时，需要清除浮动以避免对后续元素的影响。可以在父元素上添加一个 `clearfix` 类来清除浮动。例如：

<div class="clearfix">
  <img src="image.jpg" alt="image" style="float: left;">
  <p style="margin-left: 10px;">这是一段文本。</p>
</div>

<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

上述代码中，使用了 `::after` 伪元素来在父元素的最后添加一个空元素，通过 `clear: both` 来清除浮动。同时，需要给该伪元素设置 `display: table`，以避免在某些情况下出现布局问题。