Css定位 - 對齊兩個元素

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元素和旁邊元素都水平對齊（這是我想要的）。在旁邊元素中有一個部分，問題是他們沒有與#news元素對齊。在旁邊元素的頂部邊界和節元素之間有一些空間。我只是不知道爲什麼會出現這種空間...

編輯：下面是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>，則這兩個內容很可能會有不同的填充頂部設置。 無論如何要對齊它們，您可以在它們上使用CSS類或樣式屬性，使它們具有相同的這些參數設置。