代码:

css中列表中上下border叠加的问题_第1张图片

此时的效果是:

css中列表中上下border叠加的问题_第2张图片

解决办法:

css中列表中上下border叠加的问题_第3张图片

此时的效果是:

css中列表中上下border叠加的问题_第4张图片

常见的场景应用:

css中列表中上下border叠加的问题_第5张图片

代码:


    Cras justo odio
    Dapibus ac facilisis in
    Morbi leo risus
    Porta ac consectetur ac
    Vestibulum at eros

css中列表中上下border叠加的问题_第6张图片

如果没有margin-top:-1px;此时的效果就是这样子的:

css中列表中上下border叠加的问题_第7张图片

也可以使用margin-top来解决:

css中列表中上下border叠加的问题_第8张图片



总结:

1 margin-top为负值的使用

2 margin-bottom为负值的使用