html - 如何去掉span第一行的padding

Question

我在网上找到这段代码，但是在跨度的第一行总是有一个填充。我怎样才能删除它？

如下图所示，如果我去掉三 Angular 形就可以了。但是，我尝试将所有可能的 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>

Answer 1

试试这段代码。

<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;
}