html - 与 flexbox 对齐时没有空格无法对齐文本

Question

我想知道是什么导致它不读取 span 或 p 标签之间的任何空白，以及为什么 span 不与其他所有内容对齐中心？

li {
  display: flex;
  align-items: center;
}

li img {
  width: 25px;
  height: 25px;
}

li span {
  align-self: center;
}

<ul>
  <li>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/350x150"> <span> Username  </span>
    </a>

    <p> added you as a friend</p>
  </li>
</ul>

Answer 1

使用 创造空间。

或者在跨度上使用填充/边距。

li {
  display: flex;
  align-items: center;
  justify-content: center;
}

li img {
  width: 25px;
  height: 25px;
}

li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
li span {
  margin: 0 8px;
}

<ul>
  <li>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/350x150"> <span> Username  </span>
    </a>

    <p> added you as a friend</p>
  </li>
</ul>