Question

我是HTML和StackOverflow的新手。请原谅我在这里犯的任何错误。

所以我的问题是每当我插入文本或标题时，我的两个div部分之间都有差距。这两个部分之间没有填充（这两个部分是.navtop和.welcome），并且由于某种原因，当我希望它们相互接触时，它们之间总是存在间隙，如果这有意义的话。我已经尝试了我所知道的一切来修复它们但似乎没有任何效果。我之前正在这样做，而且一切正常，但我添加了一些内容，并忘记了它已经破坏了它。有人可以试着帮我吗？

＆＃13;

// JavaScript Document
$(function() {
  //$("#para").hide();
});

$(".close").click(function() {
  $(".notice").slideUp(500);
});

＆＃13;

/* Sass Document */

html {
  font-family: 'Ubuntu', sans-serif;
  background-color: white;
  color: #34495e;
}

.navigation {
  position: sticky;
  border-color: black;
  background-color: white;
  vertical-align: middle;
  padding: 0 0px;
  margin: 0px;
  color: white;
  width: auto;
  font-size: 16px;
}

a:link {
  color: hotpink;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 44px;
}

li {
  float: left;
  color: hotpink;
}

li a {
  display: block;
  border-radius: 50%;
  color: hotpink;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Notice Box */

.notice {
  text-align: center;
  background-color: hotpink;
  line-height: normal;
  padding-top: 16px;
  font-size: 16px;
  display: block;
}

.subtitle {
  position: relative;
  bottom: 30px;
  font-size: 18px;
}

.news {
  position: relative;
  bottom: 45px;
  text-align: center;
  color: aliceblue;
}

.close {
  position: relative;
  top: 0px;
  left: 250px;
  font-size: 20px;
  color: black;
  background-color: transparent;
  border: none;
}

.close:hover {
  font-size: 18px;
  color: grey;
}


/* Welcome Box */

.welcome {
  background-color: #333;
  justify-content: center;
  padding-top: 20px;
  color: hotpink;
  text-align: center;
  padding-bottom: 20px;
}

.welcome-title {
  font-size: 36px;
}

.welcome-text {
  font-size: 24px;
}


/* Footer */

.navbot {
  padding-top: 10px;
}

footer {
  text-align: center;
  align-content: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <title>Home Page</title>
</head>

<div class="navtop">
  <nav class="navigation">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Level Up</a></li>
      <li><a href="">Trade</a></li>
    </ul>
  </nav>
</div>

<div class="notice">
  <div class="button">
    <button type="button" class="close">×</button>
  </div>
  <h3 class="subtitle">Important</h3>
  <p class="news">test</p>
</div>

<div class="welcome">
  <dive class="welcome-message">
    text goes here
  </dive>
</div>

<footer>
  <div class="navbot">
    <nav class="navigation">
      <ul>
        <li><a href="about.html">About Us</a></li>
        <li><a href="">Terms of Service</a></li>
        <li><a href="">Help</a></li>
      </ul>
    </nav>
  </div>

  <div class="footer">
    Copyright 2017
    <p><a class="ToS" href="">Terms of service</a></p>
  </div>

</footer>

<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="index.js"></script>

</html>

＆＃13;

Answer 1

更改了答案和新摘要：

1。）仍然与以前相同：您的.navbot规则padding-top: 10px;将其设置为零。

2。）将margin: 0添加到.news：它具有相对位置，虽然您使用bottom设置向上移动，但相对意味着它的原始空间是保留的因为如果bottom设置不存在就会出现。这包括一个默认的margin-bottom（由浏览器添加），它扩展了父元素 - aphenomenon，也称为“折叠边距”（如果你在SO或其他地方搜索它，你会发现很多）

// JavaScript Document
$(function() {
  //$("#para").hide();
});

$(".close").click(function() {
  $(".notice").slideUp(500);
});

/* Sass Document */

html {
  font-family: 'Ubuntu', sans-serif;
  background-color: white;
  color: #34495e;
}

.navigation {
  position: sticky;
  border-color: black;
  background-color: white;
  vertical-align: middle;
  padding: 0 0px;
  margin: 0px;
  color: white;
  width: auto;
  font-size: 16px;
}

a:link {
  color: hotpink;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 44px;
}

li {
  float: left;
  color: hotpink;
}

li a {
  display: block;
  border-radius: 50%;
  color: hotpink;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Notice Box */

.notice {
  text-align: center;
  background-color: hotpink;
  line-height: normal;
  padding-top: 16px;
  font-size: 16px;
  display: block;
}

.subtitle {
  position: relative;
  bottom: 30px;
  font-size: 18px;
}

.news {
  position: relative;
  bottom: 45px;
  text-align: center;
  color: aliceblue;
  margin: 0;
}

.close {
  position: relative;
  top: 0px;
  left: 250px;
  font-size: 20px;
  color: black;
  background-color: transparent;
  border: none;
}

.close:hover {
  font-size: 18px;
  color: grey;
}


/* Welcome Box */

.welcome {
  background-color: #333;
  justify-content: center;
  padding-top: 20px;
  color: hotpink;
  text-align: center;
  padding-bottom: 20px;
}

.welcome-title {
  font-size: 36px;
}

.welcome-text {
  font-size: 24px;
}


/* Footer */

.navbot {
  padding-top: 0px;
}

footer {
  text-align: center;
  align-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <title>Home Page</title>
</head>

<div class="navtop">
  <nav class="navigation">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Level Up</a></li>
      <li><a href="">Trade</a></li>
    </ul>
  </nav>
</div>

<div class="notice">
  <div class="button">
    <button type="button" class="close">×</button>
  </div>
  <h3 class="subtitle">Important</h3>
  <p class="news">test</p>
</div>

<div class="welcome">
  <dive class="welcome-message">
    text goes here
  </dive>
</div>

<footer>
  <div class="navbot">
    <nav class="navigation">
      <ul>
        <li><a href="about.html">About Us</a></li>
        <li><a href="">Terms of Service</a></li>
        <li><a href="">Help</a></li>
      </ul>
    </nav>
  </div>

  <div class="footer">
    Copyright 2017
    <p><a class="ToS" href="">Terms of service</a></p>
  </div>

</footer>

<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="index.js"></script>

</html>

当文本放在其中时，DIV部分之间的HTML差距

1 个答案: