清除静态网页里无序列表ul和li之间间距

Question

自己写了一个静态网页，发现ul和li之间有无法清楚的行间距

我的css代码如下

.article ul{
    margin: 17px;
    padding: 5px;
    line-height: 3px;
}
.article ol{
    margin: 17px;
    padding: 5px;
    line-height: 3px;
}
.article li{
    line-height: 3px;
}

我的HTML代码如下

<ul>
<li>Title
<ul>
<li><u>Letter 1</u>
<ul>
<li><u>A</u>
<ul>
<li>Aa, Aaa</li>
</ul></li>
<li><u>B</u>
<ul>
<li>Bb, Bbb</li>
</ul></li>
<li><u>C</u>
<ul>
<li>Cc</li>
</ul></li>
</ul></li>
<li><u>Letter 2</u>
<ul>
<li>Dd</li>
</ul></li>
<li><u>Letter 3</u>
<ul>
<li>Ee</li>
</ul></li>

Chrome里显示的图片是这样，现在想清除Cc和Letter 2之间的行间距，感谢帮助！

Answer 1

你的.article是包裹着最外层的那个ul吗？你ul里面还嵌套着ul，然而你的样式.article ul是这样的，这样的话所有的ul都会有一个padding: 5px，造成了你说的间隔