html - 图片前文字

我在整个行业中都是新手，我有一个小问题。
我尝试在图像前放置(h3)文本，但是不管我怎么努力，它都对我不起作用，

我可以帮忙:)

这是我尝试过的方法，此外还尝试更改显示和位置，但无济于事。

.prosc {
  position: relative;
  line-height: 4px;
}

.mo {
  position: relative;
  display: inline-block;
  top: -50px;
  right: 0;
  bottom: 0;
}

h3 {
  font-family: 'Cabin', sans-serif;
  font-size: 2.500em;
  line-height: 0.3;
  font-weight: normal;
}

<div class="top-con">
  <h3 class="prosc">A <span class="pro">Pro</span>gramer</h3>
  <!-- This is the text that the picture blocks.-->
  <img class="mo" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Mountain-png" width="50px" height="40px">
  <!-- This one is the problem.-->
</div>

没错

最佳答案

标头元素h1 ... h6是块元素。这意味着它们之后的所有内容将从新行开始。如果您需要图像紧跟在文本之后，请使用<span>（这是一个内联元素）。然后，您可以使用CSS更改文本样式，例如字体大小等。

<div class="top-con">
  <span class="prosc">A <span class="pro">Pro</span>gramer</span>
  <img class="mo" src="//placehold.it/40" alt="Mountain-png">
</div>

关于html - 图片前文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57321292/