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

问题描述

问 题

我在写列表项的时候发现了一个问题，我的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;
}

解决方案

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

这篇关于javascript - 列表项li为什么会多出来2px的内边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！