html 边框变粗 margin -1px

最近刚开始学习web前端，html和css,对于遇到的边框变粗的问题，用margin为负值解决问题发表一些自己的理解

首先我们来看看下面一张图片

list-style: none;
                border:1px solid black;
                width: 200px;
                line-height: 2em;
                text-align: center;

你会发现中间的线条特别的粗，这个问题该如何解决呢？

这里就可以用margin -1px(取决你边框的宽度）来解决。加入这行代码的样式，如下图

 下面我们就来分析这就话，对于边框的top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后的元素拉过来。

其实每个li都向上和向左在原来的基础上移动了1px,对于bottom边框把下方紧随其后的top边框拉过来之后，top边框也要向上移动1px，刚好重合。但是如果改成：margin -10px，如下图所示。

top边框被bottom边框拉过来之后又向上移动了10px;所以出现了这样的效果。

还有其他的解决方法，就是重合的边框你可以设置：border-top(bottom或left或right):none;这样的话也可以取消边框。