兄弟元素之间的边缘不会崩溃

Question

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

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>之外，<li class="glyphicon glyphicon-search icon"></li>元素之间的边距为10px，边距为20px;。 有人可以帮助我保持这些利润一致吗？

Answer 1

这可以解决您的问题;

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

  

glyphicon glyphicon-search图标

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