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

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

Answer 1

这将解决您的问题；

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

glyphicon glyphicon-search icon

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