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

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

我会选择

按钮 { 显示：弹性；文本缩进：0.5rem； }

然后你就可以去掉 img 标签的样式了

Answer 2

在@rejas 答案上展开一点 - 如果所有间距都相同大小，则可以这样做。

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

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>