html - 私のdivでリストを使用すると、行の高さが増します

Question

私のヘッダーでは、通常のテキストを入れると行の高さは問題ありませんが、リストを使用すると上下に十分な量のパディングが得られるという問題があります。

以下は、関連するすべての HTML と CSS、およびフィドルです。

<header class="clearfix">
        <div class="content-wrapper">
            <aside>
                <div class="nav">
                    My line-height isn't bad at all!
                </div>
            </aside>
        </div>
    </header>

<header class="clearfix">
        <div class="content-wrapper">
            <aside>
                <div class="nav">
                    <ul>
                        <li>My line-height is huge!</li>
                    </ul>

                </div>
            </aside>
        </div>
    </header>

CSS

header
{
    background-color: #eee;
}

.clearfix
{
    overflow: auto;
}

header #title-container
{
    font-size: .7em;
}

    header aside .nav
    {
        padding-right: 4px;
        float: right;
    }

        header aside .nav
        {
            background-color: red;
        }

Answer 1

ul と li のマージンとパディングをリセットします。

http://jsfiddle.net/PSeFe/3/

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

Answer 2

-tagに追加style="display: inline; padding: 0;"すると問題が解決します。<ul>HTML の 2 番目の部分は次のようになります。

<header class="clearfix">
    <div class="content-wrapper">
        <aside>
            <div class="nav">
                <ul style="display: inline; padding: 0;">
                    <li>My line-height is huge!</li>
                </ul>

            </div>
        </aside>
    </div>
</header>