Question

＆＃13;

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

＆＃13;

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

＆＃13;

在safari属性中使用font-size：0不会杀死子内联块元素之间的边距。是否可以修复它，但不能更改按钮标签？

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>

如果需要使用背景颜色，请浮动它们并在按钮元素上使用clearfix。

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

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

如果您能够支持它，也可以使用flexbox。

Answer 2