html - Css定位——对齐两个元素

Question

我有两个名为#news 和aside 的元素。它们都在主要元素内。

main {
    margin: 1.25em auto;
    padding: 0;
    display: block;
    width: 96%;
    max-width:1200px;
}

#news{
    text-align: center;
    background-color: black;
    display: inline-block;
    vertical-align: top;
    margin: 0em;
    padding: 0em;
    width: 65.3%;
}

aside { 
    display: inline-block;
    vertical-align: top;
    margin-left: 3%;
    padding: 0em;
    width: 30.6%;
}

#news 元素和 aside 元素都是水平对齐的(这正是我想要的)。在 aside 元素中有一个部分，问题是它们没有与 #news 元素对齐。 aside 元素的顶部边框和 section 元素之间有一些空间。只是不知道为什么会有这个空格...

编辑:这是 Html 代码:

<main>

        <section id="news">
            <h1>Just a title</h1>
            <p>Jsdf oisdfsd oisdjf oisjdf oisdfj oisdfj oisdjfisdfj oisjdfisd  tadatatatasdifjasodfijasdfj iosjdfiosa iojsdiofjsd ijsdifjsdifjdsi ijsidfjij isjdfisjd pasok poasdko iasfsid oiasjf iosjd i isdf isfdifj</p>
        </section>

        <aside>
            <section id="aside_social">
                <ul>
                    <li>Twitter</li>
                    <li>Facebook</li>
                    <li>Youtube</li>
                </ul>
            </section>

            <section id="aside_newsletter">

            </section>
        </aside>

    </main>

Answer 1

只需添加

 aside ul{margin-top:0;}

这是演示

main {
    margin: 1.25em auto;
    padding: 0;
    display: block;
    width: 96%;
    max-width:1200px;
}

#news{
    text-align: center;
    background-color: black;
    display: inline-block;
    vertical-align: top;
    margin: 0em;
    padding: 0em;
    width: 65.3%;
}

aside { 
    display: inline-block;
    vertical-align: top;
    margin-left: 3%;
    padding: 0em;
    width: 30.6%;
}

aside ul{margin-top:0;}

<main>

        <section id="news">
            <h1>Just a title</h1>
            <p>Jsdf oisdfsd oisdjf oisjdf oisdfj oisdfj oisdjfisdfj oisjdfisd  tadatatatasdifjasodfijasdfj iosjdfiosa iojsdiofjsd ijsdifjsdifjdsi ijsidfjij isjdfisjd pasok poasdko iasfsid oiasjf iosjd i isdf isfdifj</p>
        </section>

        <aside>
            <section id="aside_social">
                <ul>
                    <li>Twitter</li>
                    <li>Facebook</li>
                    <li>Youtube</li>
                </ul>
            </section>

            <section id="aside_newsletter">

            </section>
        </aside>

    </main>