CSS產生奇怪的結果

Question

我盡我所能，儘可能簡單地將這個問題保存在圖片中。

下面是關於這個問題的圖像：

正如你可以看到比它應該這惹惱了我很多的區段H1標籤的背景會更合適。我希望所有背景都與左側對齊。

Answer 1

那麼最後我決定用文章h3標籤替換h1標籤，它工作的很好。下面是代碼：

CSS

article { 
    margin:0px 0px; 
    padding:25px 0px; 
} 
article h1{ 
    margin:0; 
    padding:0px 5px; 
    background:rgb(180,90,90); 
} 
article h3{ 
    margin:0; 
    padding:0px 10px; 
    background:rgb(90,90,180); 
} 
section { 
    padding:0px 5px; 
    background:rgb(90,180,90); 
} 

HTML

<article> 
    <h1>Article h1</h1> 
     <h3> Article h3</h3> 
     <section> 
     Section text 
     </section> 

     <h3> Article h3</h3> 
     <section> 
     Section text 
     </section> 
    </article>