Пустое пространство между вертикальными divs

Я очень новый (как и в последние несколько дней) в html и css, и я пытаюсь создать веб-сайт. Я нашел кучу ответов, связанных с моим вопросом, но все еще не мог понять, как исправить мой код и удалить пустое пространство между div. Любая помощь будет оценена очень высоко! Я включил соответствующий код ниже. Благодаря!!!Пустое пространство между вертикальными divs

<!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! Пожалуйста, прочитайте [ask]. Ключевые фразы: «Поиск и исследование» и «Объясните ... любые трудности, которые мешали вам самим решить». –

Удалите поля h1. ** h1 {margin: 0; } ** – Troyer

Обновите свой тег H1 следующим образом: h1 {font-family: «Footlight MT Light»; font-size: 52px; белый цвет; font-weight: bold; Маржа: 0; обивка: 0; } –

The p и h1 элементов имеет запас по умолчанию, который добавляет Пробельные вы видите между DIVs. Вы можете удалить этот запас (по значению 0), и таким образом не будет никакого белого пространства между дивой:

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

Пустое пространство между вертикальными divs

ответ

Смежные вопросы