html - 元素内的内联 block

Question

button {
  font-size: 0;
}

span {
  font-size: 14px;
  display: inline-block;
}

    <button>
     <span>Icon</span>
     <span>Text</span>
    </button>

在 safari 属性中 font-size: 0 不会消除子内联 block 元素之间的边距。是否可以修复它，但不能更改按钮标签？

Answer 1

这里有一些 hackish 解决方案和一个不是。

删除标记中元素之间的空格。

<button>
    <span>Icon</span><span>Text</span>
</button>

(另一种方式)

<button>
    <span>Icon</span><
     span>Text</span>
</button>

HTML 注释

<button>
    <span>Icon</span><!--
    --><span>Text</span>
</button>

或者如果您需要使用背景色，则将它们 float 并在按钮元素上使用 clearfix。

button {
    overflow: hidden;
    /* or => http://nicolasgallagher.com/micro-clearfix-hack/ */
}
button > span {
    float: left;
}

<button>
     <span>Icon</span>
     <span>Text</span>
</button>

如果你能够支持的话，你也可以使用 flexbox。