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元素都是水平对齐的（这正是我想要的）。在side元素中有一个部分，问题是它们与#news元素不对齐。在side元素的顶部边界和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>

Answer 2

所有块元素（如<h1> <h4> <div> <p> <ul> <section>等）都有自己的默认边距和填充设置，或者每个浏览器（以及每个框架或CMS，如Bootstrap等）都为其设置默认值。因此，如果在两个对齐的块中，左边一个块的内容以<h3>标签开始，而另一个块以<p>标签开始，那么这两个块很可能具有不同的margin-top and/or填充顶部设置。无论如何，要对齐它们，可以在它们上使用CSS类或样式属性，为它们提供相同的参数设置。