ul与li高度不一致

Question

有以下html代码：aaaaaaabbbbbbbcss代码如下：ulpadding:15pxfont-size:0width:857pxborder:1pxsolid$color-backgroundliposition:relativedisplay:inline-blockwidth:80pxheight24pxline-height:22pxborder:1pxsolid#e4e4e4border-radius:2pxpadding:05pxbackground-color:#f5f9fffont-size:$font-size-medium&:nth-child(9n+1)margin-left:0.deleteposition:absolutedisplay:inline-blockwidth:12pxheight:12pxright:-(@width/2)pxtop:-(@height/2)pxbackground:url("./close.png")centerno-repeatbackground-size:containbackground-color:$color-background-blueborder-radius:50%cursor:pointer&+limargin-left:15pxspandisplay:inline-blockwidth:100%overflow:hiddenwhite-space:nowraptext-overflow:ellipsis在chrome中看到ul高度为74，但是li的高度只有24，请问是什么原因呢？

Answer 1

把ul的padding属性设置为0，然后再添加一个margin为0，我已经尝试过了，可以的
ul{
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;
}
aaaaaaa
bbbbbbb
                            

Answer 2

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