垂直格子之間的空白

我是非常新（就像在，只是在過去幾天）html和css，我試圖創建一個網站。我發現了一堆與我的問題有關的答案，但仍然無法弄清楚如何修復我的代碼並刪除div之間的空白區域。任何幫助將超級讚賞！我已經在下面列出了相關的代碼。謝謝！！！垂直格子之間的空白

<!DOCTYPE html> 
<html> 
<head> 
<title>Budget Line of Business</title> 
<style> 
h1 {font-family: "Footlight MT Light"; 
     font-size: 52px; color: white; font-weight: bold; } 
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: none; 
} 

li { 
float: right; 
} 

li a { 
display: block; 
color: #FC4A1A; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover:not(.active) { 
background-color: #062f4f; 
} 

</style> 
</head> 
<body> 
<div style="background-color:#f7b733;"> 
<ul><strong> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#ideas">Ideas</a></li> 
    <li><a href="#work">Our Work</a></li> 
    <li><a href="#us">About Us</a></li></strong> 
</ul> 
<h1><center>Let's Make Your Budget Experience Extraordinary</center></h1> 
<p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p> 
<p style="text-align: center;"><strong>^ (down button)</strong></p></p>  </div> 
</div> 

<div style="background-color:#4abdac;"> 
<h1 style="text-align: left;">Making budget offices better</h1> 
</div> 

<div style="background-color:#fc4a14;"> 
<h1 style="text-align:right;">Learn All About Budget</h1> 
</div> 

<div style="background-color:#062f4f;"> 
<h1 style="text-align: left;">We Make Technology Accessible</h1> 
</div> 

<div style="background-color:#DFDCE3;"> 
<h1 style="text-align:right;">Grow Your Career</h1> 
</div> 

</body> 
</html>

來源

2016-11-22 Mary

歡迎來到Stack Overflow！請閱讀[問]。重要短語：「搜索和研究」和「解釋......阻止你自己解決它的任何困難」。 –

刪除h1頁邊距。 ** h1 {margin：0; } ** – Troyer

將H1標籤更新爲：h1 {font-family：「Footlight MT Light」; font-size：52px;白顏色; font-weight：bold;餘量：0;填充：0; } –

的p和h1元素具有默認空白，它增加了空格，你的DIV之間看到。您可以刪除此保證金（將它設置爲0），這樣會有的div之間沒有空格：

p { 
    margin: 0; 
} 
h1{ 
    margin: 0; 
}

這裏是一個工作示例：

h1 {font-family: "Footlight MT Light"; 
 
     font-size: 52px; color: white; font-weight: bold; } 
 
ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
background-color: none; 
 
} 
 

 
li { 
 
float: right; 
 
} 
 

 
li a { 
 
display: block; 
 
color: #FC4A1A; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
background-color: #062f4f; 
 
} 
 
p { 
 
    margin: 0; 
 
} 
 
h1{ 
 
    margin: 0; 
 
}

<div style="background-color:#f7b733;"> 
 
    <ul><strong> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#ideas">Ideas</a></li> 
 
    <li><a href="#work">Our Work</a></li> 
 
    <li><a href="#us">About Us</a></li></strong> 
 
    </ul> 
 
    <h1><center>Let's Make Your Budget Experience Extraordinary</center></h1> 
 
    <p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p> 
 
    <p style="text-align: center;"><strong>^ (down button)</strong></p> 
 
</div> 
 

 
<div style="background-color:#4abdac;"> 
 
    <h1 style="text-align: left;">Making budget offices better</h1> 
 
</div> 
 

 
<div style="background-color:#fc4a14;"> 
 
    <h1 style="text-align:right;">Learn All About Budget</h1> 
 
</div> 
 

 
<div style="background-color:#062f4f;"> 
 
    <h1 style="text-align: left;">We Make Technology Accessible</h1> 
 
</div> 
 

 
<div style="background-color:#DFDCE3;"> 
 
    <h1 style="text-align:right;">Grow Your Career</h1> 
 
</div>

請注意，您的代碼中還包含一些不應存在的元素，我將它們移除以使html正確。

來源

2016-11-22 16:21:55 Dekel

Yesss！非常感謝你的幫助！！ – Mary

垂直格子之間的空白

回答

相關問題