margin小技巧

2019独角兽企业重金招聘Python工程师标准>>>

有个很典型的需求

相信接下来这个需求，你十有八九实现过，甚至实现过多次，来看 图一：

我们看到这个图中，有个列表，每个列表项下面都有一条线，但最后一项没有。我们预期的代码是：

<div id="demo">
    <h3>标题列表</h3>
    <ul>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
    </ul>
</div>

如果每项都有条底线，我们可以很简单的做到，如下：

#demo li{
    border-bottom: 1px solid #ccc;
}

然而为了处理最后一项，事情就变得有点纠结了。我知道肯定有人要说，我们有 :first-child, :nth-last-child(n), :nth-last-of-type(n) 之类的CSS3选择符，要处理这个，太easy了。恩，我也不得不承认，CSS3确认让事情变得简单多了。但我们可能需要面对一些国情，因为需要照顾一些弱小者，比如IE6-8，它们离CSS3的世界太远。

传说中的first/last解决方案

所以我们需要找别的方法，于是这样的代码，相信你见过无数遍了：

<div id="demo">
    <h3>标题列表</h3>
    <ul>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li>&raquo; 有点累想歇一下好长一个标题</li>
        <li class="last">&raquo; 有点累想歇一下好长一个标题</li>
    </ul>
</div>

我没乱说，你肯定见到类似的代码千百遍了？是的，它确实能够解决我们的问题，代码如下：

#demo .last{
    border-bottom: 0 none;
}

使用特殊的class来单独处理这项，但我不是很喜欢这样的code，原因大致有：

• 需单独定义一个差异化的class；

• 不利于数据循环输出，因为还得判断是否最后一项；

margin的神来之笔

基于以上的原因，肯定会有其它的解决方案出现，这时margin无疑是非常不错的选择，来看代码：

#demo{
    overflow:hidden;
}
#demo ul{
    margin-bottom: -1px;
}

是不是很Cool，完全避免了上述的问题，并且代码量很小。margin是互动的，能影响其上下文的布局。本例中，当 ul margin-bottom:-1px ，其本身的高并不会被改变，但其相邻的元素则会往上 1px ，这时相邻的元素即其包含块 #demo，所以给 #demo overflow:hidden ，就直接将那 1px 的边框给裁剪掉了。

转载于:https://my.oschina.net/u/1403236/blog/189002