ul与li高度不一致

Question

有以下html代码：
aaaaaaa
bbbbbbb
css代码如下：
ul
padding:15px
font-size:0
width:857px
border:1pxsolid$color-background
li
position:relative
display:inline-block
width:80px
height24px
line-height:22px
border:1pxsolid#e4e4e4
border-radius:2px
padding:05px
background-color:#f5f9ff
font-size:$font-size-medium
&:nth-child(9n+1)
margin-left:0
.delete
position:absolute
display:inline-block
width:12px
height:12px
right:-(@width/2)px
top:-(@height/2)px
background:url("./close.png")centerno-repeat
background-size:contain
background-color:$color-background-blue
border-radius:50%
cursor:pointer
&+li
margin-left:15px
span
display:inline-block
width:100%
overflow:hidden
white-space:nowrap
text-overflow:ellipsis
在chrome中看到ul高度为74，但是li的高度只有24，请问是什么原因呢？

Answer 1

把ul的padding属性设置为0，然后再添加一个margin为0，我已经尝试过了，可以的testul{margin:0;padding:0;font-size:0;width:857px;border:1pxsolid$color-background;}li{position:relative;display:inline-block;width:80px;height:24px;line-height:22px;border:1pxsolid#e4e4e4;border-radius:2px;padding:05px;background-color:#f5f9ff;font-size:$font-size-medium;&:nth-child(9n+1){margin-left:0}}.delete{position:absolute;display:inline-block;width:12px;height:12px;right:-(@width/2)px;top:-(@height/2)px;background:url("./close.png")centerno-repeat;background-size:contain;background-color:$color-background-blue;border-radius:50%;cursor:pointer;}&+li{margin-left:15px;}span{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}aaaaaaabbbbbbb

Answer 2

因为浏览器默认ul上面有padding和margin，设置一下即可：ul{padding:0;margin:0;}