最近刚开始学习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,刚好重合。 还有其他的解决方法,就是重合的边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框。