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

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>

（参见小提琴）

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

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

有没有另一种方法可以让我保持 HTML 代码不变，同时去掉图像上没有文本的边距？

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

Answer 1

要扩展一下 @rejas 的答案 - 如果所有间距大小相同，就可以完成。

编辑：我认为，自 Chrome 87 以来，存在一个错误，导致以下解决方案无法工作 - https://bugs.chromium.org/p/chromium/issues/detail?id=1159311。幸运的是，有一个解决方法，但仅适用于支持 CSS 网格的较新浏览器。因此，新的组合解决方案应该是这样的：

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

@supports (display: grid) {
    button {
        text-indent: 0;
        padding: 5px 10px;
        display: inline-grid;
        grid-gap: 10px;
        grid-auto-flow: column;
    }

    button > img {
        margin-left: 0;
    }
}

<button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">OK
</button>

<button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
</button>

<button>
    OK
</button>

当然，您可以选择仅支持较新的浏览器，在这种情况下，您可以使网格间隙与按钮填充不同，从而获得更大的灵活性。

旧的解决方案：

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
}

<button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">OK
</button>

<button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
</button>

<button>
    OK
</button>