Q:

How to remove the padding in the first line of span

I found this code online, but there is always a padding on the first line in the span. How can I remove that?
Like what is shown in the following image, if I remove the triangle, it will be fine. However, I've tried to set all possible padding/margin to 0 but there still is a padding at the first line in the span.

.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>

A:

Try this code.
<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;
}

