Header標籤推父元素向下

Question

所以，這原來是一個重複的問題： space between an inline-block element and a block element。我剛剛在搜索該網站時錯誤地提到了我的問題。

我有我的jsfiddle

這裏把我的網站的代碼是我的html：

<div id="main"> 
    <section class="section-left"> 
     <header><h1>My Name</h1></header> 
     <content> 
      <p></p> 
     </content> 
    </section><section class="section-right"> 
     <header><h3>Hello World!</h3></header> 
     <content> 
      <p></p> 
     </content> 
    </section> 
</div> 

這裏是我的CSS：

#main { 
    background-color:blue; 
    height:92%; 
} 

#main section { 
    display:inline-block; 
} 

.section-left{ 
    width:30%; 
    height:100%; 
    background-color:red; 
} 

.section-right{ 
    width:70%; 
    height:100%; 
    background-color:orange; 
} 

當我拿出的H *標籤，節元素返回正確顯示，沒有空間。但是，只要我把標籤放在它們中，左側的部分或者幾乎一直移動到底部，或者如果我在左側部分（在另一個論壇中找到）添加邊框，它會將部分向下推在它下面。

我能找到這種情況發生的唯一事情，就是觀看時通的Chrome瀏覽器開發工具是：

webkit-margin-before:.83em; 
webkit-margin-after:.83em; 

任何人都可以看到，如果我做這個事情不正確的？

另外，如果我只是改變它的兩個部分（我可以把文章標籤？）至 float：left;

我需要插入什麼類型的代碼才能使它看起來像現在這樣？

Answer 1

部分默認爲vertical-align: baseline;