如何在html中移动'case'图像

Question

这就是代码：https://codepen.io/vendettashakur/pen/rmLYBN 我想知道如何用表壳上部移动图像。

  body {
      background: #333;
    }
.wrapper {
      padding: -10px;
   margin: 10px;
  margin-right: 900px;
  text-align: center;
}
.treasure {
      color: #fff;
      display: inline-block;
      max-width: 400px;
      text-align: center;
      padding: 70px;
      margin: 20px;
      font-size: 25px;
      font-weight: bold;
    }
.block {
      padding: 4px;
      background: #7c4dff;;
      border-radius: 2px;
      margin-left: 4px;
    }

.subcase {
      
      color: white;
      display: inline-block;
      max-width: 2000px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
      padding: -20px;
      margin: -76px;
      vertical-align: text-top;
    }
.treasureimage {
      
      display: inline-block;
      max-width: 2000px;
      padding: 10px;
      vertical-align: text-top;
      
    
    }

<div class="wrapper">
  <p class="treasure">
        Treasure Chest
        <span class="block">
          $1
      </span></p>
  <br>
   <p class="subcase">
        10% chance of getting a top-grade game</p>
  <br>
  <img class="treasureimage">
        <img src="https://gamedrop.win/img/cases/case_blue.png" alt="case" style="width:200px;height:128px"> </img>

图像必须完美排列才能看起来不错。就这样。我尝试了填充，边距等，对我来说没有任何作用。

Answer 1

如果您希望在文本“Treasure Chest”之后移动图像，那么在您的html中，在第一个<img>标记后移动<p>标记