Question

我有两个名为#news和旁边的元素。它们都属于主要元素。

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

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

Answer 2

添加

 aside ul{margin-top:0;}

这是演示

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

Css定位 - 对齐两个元素

2 个答案: