刪除標題和正文之間的空白區域

我試圖刪除標題和正文之間的空白區域，但無法使其正常工作。我已經包含一個顯示我的代碼的片段。任何人都知道如何排序？刪除標題和正文之間的空白區域

header { 
 
    width: 100%; 
 
    height: 10em; 
 
    background-color: #345cd7; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
.top-box { 
 
    background-color: #345cd7; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body> 
 
    <header> 
 
    <img src="images/white.svg" id="logo" /> 
 
</header> 
 
    <div class="top-box"> 
 
     <h1>Welcome to</h1> 
 
     <h2>Welcome to the family. Download one of the apps and get making them calls!</h2> 
 
    </div> 
 
</body>

來源

2017-05-05 Naomi

爲什麼地球上你'header'標籤'body'標籤之外？ – bugwheels94

add'position：absolute;寬度：100％;''到'.top-box' – mxr7350

'h1'自然有餘量，所以如果你不刪除它，它可能會導致[崩潰餘量]（https://developer.mozilla.org/ en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing）效果將邊距放在父項上（這是造成您的差距的原因） – Pete

在h1標籤只需設置margin:0。

header { 
 
    width: 100%; 
 
    height: 10em; 
 
    background-color: #345cd7; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
.top-box { 
 
    background-color: #345cd7; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.top-box h1{ 
 
    margin:0; 
 
}

<header> 
 
    <img src="images/white.svg" id="logo" /> 
 
</header> 
 
<body> 
 
    <div class="top-box"> 
 
     <h1>Welcome to</h1> 
 
     <h2>Welcome to the family. Download one of the apps and get making them calls!</h2> 
 
    </div> 
 
</body>

來源

2017-05-05 10:45:52

把你的頭在身體內部：

<body> 

    <header> 
    <img src="images/white.svg" id="logo" /> 
    </header> 

    <div class="top-box"> 
    <h1>Welcome to</h1> 
    <h2>Welcome to the family. Download one of the apps and get making them calls!</h2> 
    </div> 
</body>

確保您0任何填充和利潤率的頭

來源

2017-05-05 10:49:25 sarah3585

我改變了這種情況，但它仍然這樣做，但我有一個工作的答案已經。謝謝。 – Naomi

h1標籤默認有邊距。因此，只要去除餘量，在這種情況下頂，會做的工作

header { 
 
    width: 100%; 
 
    height: 10em; 
 
    background-color: #345cd7; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.top-box { 
 
    background-color: #345cd7; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    margin-top: 0; 
 
}

<header> 
 
    <img src="images/white.svg" id="logo" /> 
 
</header> 
 
<div class="top-box"> 
 
    <h1>Welcome to</h1> 
 
    <h2>Welcome to the family. Download one of the apps and get making them calls!</h2> 
 
</div>

來源

2017-05-05 10:55:15 bugwheels94

刪除標題和正文之間的空白區域

回答

相關問題