兄弟元素之间的边距不折叠

Question

我正在尝试设置兄弟元素之间的边距。除字形图标外，所有同级元素都有边距折叠行为。 代码如下：

li{
    list-style-type: none;
    margin: 10px auto;
}

<div id="front">
    <li>Click here for a random article</li>
    <li class="search-box">dfg</li>
    <li class="glyphicon glyphicon-search icon"></li>
    <li>Click icon to search</li>
</div>

<li>元素之间的边距为10px，<li class="glyphicon glyphicon-search icon"></li>除外，边距为20px；。 有人可以帮助我使这些边距保持一致吗？

Answer 1

这将解决您的问题；

 <li><span class="glyphicon glyphicon-search icon"><span></li>

glyphicon glyphicon-search 图标

添加用于显示图标的样式，并且比您的样式更具体，因此它会覆盖您的样式。