html元素旁边奇怪的黄色（！）行答案

【问题标题】：strange yellow (!) line next to html elementhtml元素旁边奇怪的黄色（！）行
【发布时间】：2018-07-03 06:43:42
【问题描述】：

我在#mainContainer 和HTML-body 之间看到了这条奇怪的黄色 (!) 线，但仅在右侧且仅在 header/nav-section 下方。

在 Chrome 和 Firefox 中发生。

编辑： 在玩了很长时间后，我摆脱了黄线。不知道为什么，但它现在消失了。我把代码放在这里以防有人遇到类似问题：

<!DOCTYPE html>
<html>

<head>
    <title>navbar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="mainContainer">

        <header>
            <h1>Test Webseite</h1>
        </header>

        <nav>
            <ul id="menu">
                <li><a href="#">test1</a></li>
                <li><a href="#">test2</a></li>
                <li><a href="#">test3</a></li>
                <li><a href="#">test4</a></li>
                <li><a href="#">test5</a></li>
            </ul>
        </nav>

        <section>
            Lorem ipsum 
        </section>
    </div>
</body>

</html>

CSS：

html {
    height:100%;
    }
body {
    margin: 0 auto;
    padding: 0;
    font-family: sans-serif;
    background-color: #dedede;
    width:700px;
    height: 100%;
    }
#mainContainer {

    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    }

header {
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
nav ul {
    background: #424242;
    overflow: hidden;
    color: white;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0;
}

nav ul li {
    display: inline-block;
    font-size: 16px;
}

nav ul li:hover {
    background-color: #399077;
}
ul li a {
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 12px 35px;
}
section {
    box-sizing: border-box;
    line-height: 1.7em;
    font-size: 0.9em;
    padding: 40px;
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;

}

【问题讨论】：

我没看到。它是在点击后发生的吗？
我看到了黄线，我做了一些挖掘，发现它是身体边缘的一部分。将边距设置为不自动会做一方面！够近了吧？
简单地把正文边距弄得乱七八糟。看看你能不能比我有更多。
感叹号：这条线让我很惊讶....为什么它是所有颜色的黄色？整个页面没有黄色。因此感叹号:)
背景色：#ddddaa；那就是您将背景设置为的颜色，您只需对边距进行排序即可。或者它可能是填充！谁知道

标签： html css layout

【解决方案1】：

我现在改变了一些颜色。现在白色区域旁边的黄线消失了。但是在绿色标题区域的右侧有一条蓝线（如果你仔细观察的话）！

有人指出，这可能是一种视错觉。他们可能是对的吗？我觉得这有点难以置信。为什么它只是在右边而不是在左边？

<!DOCTYPE html>
<html>
<head>
    <title>navbar</title>
    <link rel="stylesheet" type="text/css" href="style.css">    
</head>
<body>
<div id="mainContainer">
    <header>
        <h1>Test Webseite</h1>
    </header>

    <nav>
        <ul id="menu">
            <li><a href="#">test1</a></li>
            <li><a href="#">test2</a></li>
            <li><a href="#">test3</a></li>
            <li><a href="#">test4</a></li>
            <li><a href="#">test5</a></li>
        </ul>
    </nav>

    <section>
            Lorem ipsum 
    </section>
</div>
</body>
</html>

CSS：

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;    
    background-color: grey;
}
header{
    background: green;
    width:100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
#mainContainer {
    width: 95%;
    max-width: 850px;
    margin: 0 auto;
    padding: 0;
    background-color: #ffffff;
}
ul li a{
    text-decoration: none;
    color: white;
    display: inline-block;
    padding: 12px 35px;
}
nav ul{
    background: #424242;
    overflow: hidden;
    color: white;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size:0;
}
nav ul li{
    display: inline-block;
    font-size:16px;
}
nav ul li:hover{
    background-color: #399077;
}
section{
    line-height: 1.7em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
    text-align: justify;
    text-justify: inter-word;
}

【讨论】：

【解决方案2】：

body {
  margin: 0 auto;
  font-family: sans-serif;
  background-color: #ddddaa;
}

header {
  background: #00795f;
  width: 100%;
  padding: 40px 0;
  color: white;
  text-align: center;
}

#mainContainer {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #D2D2D2;
}

ul li a {
  text-decoration: none;
  color: white;
  display: inline-block;
  padding: 12px 35px;
}

nav ul {
  background: #424242;
  overflow: hidden;
  color: white;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0;
}

nav ul li {
  display: inline-block;
  font-size: 16px;
}

nav ul li:hover {
  background-color: #399077;
}

section {
  line-height: 1.7em;
  font-size: 0.9em;
  padding: 40px;
  width: 75%;
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-word;
  background-color: #ffffff
}

<!DOCTYPE html>
<html>

<head>
  <title>navbar</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <header>
    <h1>Test Webseite</h1>
  </header>
  <div id="mainContainer">
    <nav>
      <ul id="menu">
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a></li>
        <li><a href="#">test5</a></li>
      </ul>
    </nav>

    <section>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime soluta incidunt ipsam, asperiores consequatur esse. Optio velit animi molestiae autem quas dignissimos architecto, blanditiis repellat rem nobis et adipisci perspiciatis quidem laudantium
      eaque corporis minima eos neque sapiente provident! Est, quod. Voluptates nisi hic vero deleniti neque veritatis facilis, nesciunt officiis? Laudantium vero autem, aspernatur consequatur! Ad assumenda, neque excepturi aut asperiores voluptatibus!
      Magni, saepe! Nisi laboriosam ea illo doloribus fugiat minus maiores! Magnam voluptatibus, deserunt aspernatur. Aperiam natus voluptatum libero magni? Tenetur quae optio, perferendis enim nesciunt quam inventore dolor necessitatibus, alias asperiores
      dolore. Hic perspiciatis quia laborum. Maxime porro eaque vero, laudantium blanditiis odio quam qui eius nulla consequatur doloremque quos optio minima recusandae laboriosam consectetur! Deserunt at expedita libero, alias quasi tempora dolores,
      doloremque illo eveniet aperiam facere totam molestias, eaque nihil odio consequatur esse. Ut eius facere vitae molestias optio, esse tenetur exercitationem facilis beatae, maiores nam! Dignissimos nulla ipsum a iure numquam ducimus aut ea nemo
      nihil, odit possimus magni dolor hic reiciendis exercitationem, error nesciunt dolorum eius, odio obcaecati consectetur repudiandae sapiente repellat omnis sunt! Quas ducimus at, nam laudantium. Architecto quas facere perferendis pariatur esse natus
      eligendi enim, doloremque nesciunt nulla. Vel, quasi.
    </section>
  </div>
</body>

</html>

我一直对此感到疯狂，我相信这是宽度属性。这行得通，没有任何余量！运行 sn -p 看看是不是你想要的！移除了宽度、最大宽度和填充。

编辑：如果你希望整个空白区域都变成黄色，那么你的目标元素是错误的......你的主容器显示一个白色背景，如果你想要的话就改变它

edit2：我已经再次编辑它以（希望）适合你想要的......

【讨论】：

感谢您的帮助！我想要一个灰色的背景和一个大的主要白色容器。如果我把“最大宽度：850px；”回到身体，线条又出现了……
你到底想要灰色的哪一部分？是文本所在的标题还是主容器？？
像许多网站一样，我希望文本区域（lorem ipsum....）为白色，主要（即正文）背景颜色为浅灰色...谢谢又来了！
我又做了一次编辑……不知道是不是你想要的，虽然哈哈
抱歉，有点混乱 :) 基本上我希望布局与第一篇文章中的一样，只是没有烦人的黄线......

【解决方案3】：

我现在已经修复它并编辑了第一个帖子！

【讨论】：