菜单和内容之间不需要 space

Question

我正在 HTML 和 CSS 的帮助下开发一个网站。在这里，我有页面的两个部分，第一部分 - 菜单和第二部分 - 其余内容。我在两个部分之间看到不需要的 space。我多次检查代码，但找不到任何原因。我使用开发人员工具来查看我能做什么。边距为 0px。当我将边距减小到 -18 或 -19 像素时，我可以看到两个部分连接在一起。

另外，还有一个问题。段落文本超出容器（如图所示）。代码如下 -

body {
    margin: 0px;
    background-color: #d6d6d6;
    color: black;
}

a {
    text-decoration: none;
    color: black;
}

#top{
    width: 100%;
    height: 80px;
    background-color: white;
    position: sticky;
    box-shadow: 0 0 5px 0.1px;
}

header img {
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid black;
    margin-left:  50px;
    float: left;
    width: 15%;
    height: 80px;
}

nav a {
    margin: 81px;
    font-size: 40px;
    font-family: sans-serif;
    color: darkgray;
}

nav {
    padding: 20px;
}

#container {
    width: 1190px;
    background-color: white;
    margin: 0 auto;
    box-shadow: 0 0 5px 0.1px;
}

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Home | Day to Dayz Solutions</title>
    </head>
    
    <body>
        <div id="top">
            <header>
                <img src="http://placehold.it/400px80">
            </header>
            <nav>
            <a href="home.html">Home</a>
            <a href="our_services.html">Our Services</a>
            <a href="contact_us.html">Contact Us</a>
            </nav>
        </div>
        <div id="container">
        <article>
            <section>
                <h1>About Us</h1>
                <p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
            </section>
        </article>
        <footer>&copy; <p>2020 | Site Designed and Developed by Praneet Dixit</p></footer>
        </div>
        
    </body>
</html>

我知道菜单的内容可能会乱七八糟，因为我没有使用 flexbox 或类似的东西。请无视。

Answer 1

你提到的不需要的 space 是因为你使用了关于我们的 h1 标签。

<h1>About Us</h1>

尝试将其更改为：

<span>About Us</span>

并根据需要自定义 css:

span {
padding: 5px;
margin: 5px;
}

Answer 2

为了让内容保留在框中，请将此属性应用于您的 p 标签

word-break: break-all;

如果您希望您的框一个接一个对齐，请像这样从您的 h1 中删除边距：

h1{
  margin: 0;
}

Answer 3

<h1> 上有空白，导致页眉和内容之间出现间距。将 margin: 0 设置为 h1 将删除多余的间距。对于第二个问题，您可以使用 word-break: break-all; 来防止容器中的文本溢出。有关详细信息，请参阅代码段。

/* Issue 1: extra space between header and content */
h1 {
  margin: 0;
}


/* Issue 2: Overflow with long word */
p {
  word-break: break-all;
}

body {
  margin: 0px;
  background-color: #d6d6d6;
  color: black;
}

a {
  text-decoration: none;
  color: black;
}

#top {
  width: 100%;
  height: 80px;
  background-color: white;
  position: sticky;
  box-shadow: 0 0 5px 0.1px;
}

header img {
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid black;
  margin-left: 50px;
  float: left;
  width: 15%;
  height: 80px;
}

nav a {
  margin: 81px;
  font-size: 40px;
  font-family: sans-serif;
  color: darkgray;
}

nav {
  padding: 20px;
}

#container {
  width: 1190px;
  background-color: white;
  margin: 0 auto;
  box-shadow: 0 0 5px 0.1px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home | Day to Dayz Solutions</title>
</head>

<body>
  <div id="top">
    <header>
      <img src="http://placehold.it/400px80">
    </header>
    <nav>
      <a href="home.html">Home</a>
      <a href="our_services.html">Our Services</a>
      <a href="contact_us.html">Contact Us</a>
    </nav>
  </div>
  <div id="container">
    <article>
      <section>
        <h1>About Us</h1>
        <p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
      </section>
    </article>
    <footer>&copy;
      <p>2020 | Site Designed and Developed by Praneet Dixit</p>
    </footer>
  </div>

</body>

</html>

菜单和内容之间不需要 space

Unwanted space between menu and content

html

css

margin