刪除不必要的空間

Question

我有以下標記

<div class="middle-content"> 
    <div class="red-div"> 
     <div class="tex-area"> 
      <h4>First Header</h4> 
      <p>Some random paragraph</p> 
     </div> 
    </div> 
    <div class="white-div"> 
     <div class="tex-area"> 
     <h4>Second Header</h4> 
     <p>Some random paragraph</p> 
     </div> 
    </div> 
</div> 

以下造型

.middle-content { 
     overflow:hidden; 
     display:block; 
    } 
    .middle-content .red-div { 
     height: 150px; 
     background-color: red; 
    } 
    .red-div .tex-area 
    { 
     margin:-50px 0 20px 130px; 
    } 
    .middle-content .white-div { 
     height: 150px; 
     background: white; 
    } 

所需的輸出應。

但是我卻越來越

正如你可以看到我有空白，我不知道它的來源。有誰知道如何擺脫這個空白？我似乎無法弄清楚如何生成空間

在此先感謝您的幫助。

Answer 1

這是由於瀏覽器的默認樣式，設置

h4, p { 
    margin:0; 
    padding:0; 
} 

Answer 2

嘗試line-height 90％以下

.red-div { line-height: 90%;} 
.white-div { line-height: 90%;}