javascript - 列表项li为什么会多出来2px的内边距？

Question

我在写列表项的时候发现了一个问题，我的li设置的height:50px;width:20px，可是在chrome里测试的是52和22，我试过修改ul和li的任何相关属性，都无法解决，多出来的是哪来的啊？

<ul class="tag">
        <li class="none">tag1</li>
        <li class="none">tag2</li>
        <li class="none">tag3</li>
</ul>

.tag {
    margin: 0 auto;
    width: 960px;
    padding: 0;
    list-style: none;
}
.tag li {
    display: inline-block;
    padding: 0;
    margin: -4px;
    width: 50px;
    height: 20px;
    text-align:center;
    border: 1px solid black;
    font-size: 10px;
}

Answer 1

你截图中显示的52*22是浏览器计算了元素边框以后的宽度和高度，如果你把width和height改成48和18，选取元素时的提示就变成50和20了，多出的两像素是上下左右边框哦

Answer 2

太明显了,你加了边框肯定上下左右多像素啊

Answer 3

因为边框也算进去了上下左右各 1px~然后右边的1px+下一项的左边框1px肯定就是看到有2px的黑框啦~亲要去看下盒模型啊

Answer 4

你可以搜索盒模型这个概念学习一下

Answer 5

border: 1px solid black; 这个在盒模型的四周都有了1px边框。