html - 仅当后跟文本时如何在元素后添加边距

Question

我的页面上有按钮，有时带有图标图像和文本标签，有时只有图标，没有文本。

我已经对按钮中的图像进行了样式设置，以便右侧有一个边距，将图标与文本分开。

问题是，由于那个边距，如果按钮中没有文本，则图标不在按钮的中心，因此看起来很糟糕。

button {
  border: none;
  border-radius: 0.5rem;
  background-color: pink;
  line-height: 32px;
  font-size: 1rem;
  padding: 0.5rem;
}

button > img {
  float: left;
  margin-right: 0.5rem;
}

<div>
  <p>
    This looks OK:
  </p>
  <button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png"> OK
  </button>
</div>
<div>
  <p>
    This doesn't (icon not in the center of the button):
  </p>
  <button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
  </button>
</div>

(见 fiddle)

一个简单而明显的解决方法是将文本放在 span 元素中，然后使用 :only-child 设置图像元素的样式。 .

但随后我将不得不更改我们代码库中已经使用这种样式的很多地方，我必须以某种方式说服我的开发人员始终将他们的按钮标签放在 span 元素中，只是为了让没有文本标签的按钮看起来不错.

是否有另一种方法可以让我保持我的 HTML 代码不变，同时去掉图像上的边距(如果它后面没有文字)？

我试过用 :not 做实验和 :empty伪类选择器，但无法使其工作。问题是您无法选择纯文本节点或为其设置样式。

Answer 1

我愿意

button { display: flex; text-indent: 0.5rem; }

然后，您可以完全摆脱 img 标签的样式