Пробелы между вертикальными div [дубликаты]

Я очень новичок (последние несколько дней) в 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>

html css blank-line
person Mary    schedule 22.11.2016    source источник
comment
Добро пожаловать в Stack Overflow! Пожалуйста, прочтите Как спросить. Ключевые фразы: Искать, исследовать и Объяснять... любые трудности, которые помешали вам решить это самостоятельно.   -  person Heretic Monkey    schedule 22.11.2016
comment
Удалите поля h1. h1 { поле: 0;   -  person Troyer    schedule 22.11.2016
comment
Обновите тег H1 следующим образом: h1 {font-family: Footlight MT Light; размер шрифта: 52px; белый цвет; вес шрифта: полужирный; маржа: 0; заполнение: 0; }   -  person Just_Do_It    schedule 22.11.2016

Ответы (1)


arrow_upward
3
arrow_downward

Элементы 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 правильным.

person Dekel    schedule 22.11.2016
comment
Даааа! Большое вам спасибо за вашу помощь!! - person Mary; 22.11.2016