html - 如何删除跨度的第一行中的填充

我在网上找到了这个代码，但是在跨度的第一行总是有一个填充。我怎样才能去掉它？
如下图所示，如果我去掉三角形，就可以了。不过，我已经尝试将所有可能的padding/margin设置为0，但在跨度的第一行仍有一个填充。

.receiver div:nth-child(1) {
  float: right;
}

.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius: 7px;
}

.right_triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: relative;
  right: -16px;
  top: 3px;
}

span {
  width: 50px;
  display: block;
  text-align: left;
  word-wrap: break-word;
}

<div class="receiver">
  <div>
    <img src="test.jpg">
  </div>
  <div>
    <div class="right_triangle"></div>
    <span> longlonglonglong </span>
  </div>
</div>

最佳答案

试试这个代码。

<div class="receiver">
  <div>
    <img src="test.jpg">
  </div>
  <div class="box">
    <p class="floattext">
      float text
    </p>
    <div class="right_triangle"></div>
    <span> longlonglonglong </span>
  </div>
</div>

.receiver div:nth-child(1) {
  float: right;
}

.receiver div:nth-of-type(2) {
  float: right;
  background-color: gold;
  margin: 0 10px 10px 20px;
  padding: 10px 0px 10px 10px;
  border-radius: 7px;
}

.box {
  position: relative;
}

.right_triangle {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent gold;
  position: absolute;
  right: -15px;
  top: 8px;
}

.floattext {
  position: absolute;
  top: -30px;
  width: 100%;
  left: 0;
}

span {
  width: 50px;
  display: block;
  text-align: left;
  word-wrap: break-word;
}

关于html - 如何删除跨度的第一行中的填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50364078/