如何仅在元素后跟文本的情况下在元素后添加边距

Question

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

我已经在按钮中设置了图像样式，以使右边有一个空白，以将图标与文本分开。

问题在于，由于该空白，如果按钮中没有文本，则图标不在按钮的中央，因此看起来很cr脚。

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设置image元素的样式。

但是随后我必须在我们的代码库中更改许多已经使用此样式的位置，并且我必须以某种方式说服我的开发人员始终将其按钮标签放在span元素中，仅使按钮没有文本标签看起来不错。

是否有另一种方法可以使我的HTML代码保持不变，同时又可以消除图像后的空白（如果文本后没有文字的话）？

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

Answer 1

我愿意

  

按钮{display：flex;文字缩进：0.5rem； }

然后您可以完全取消img标签的样式

Answer 2

要扩展@rejas答案-如果所有间距都相同，则可以这样做。

class Foo is/does Bar {
  bar  abc   { … }
  bar  xyz   { … }
  bar  blarg { … }
}

button {
    border: none;
    border-radius: .5rem;
    background-color: pink;
    line-height: 32px;
    font-size: 1rem;
    padding: 5px 10px 5px 0;
    vertical-align: middle;
    display: inline-flex;
    text-indent: 10px;
}

button::-moz-focus-inner {
    border: 0;
}

button > img {
    margin-left: 10px
}