我的内容周围有未知的白色边框答案

【问题标题】：Unknown white border around my content我的内容周围有未知的白色边框
【发布时间】：2017-07-28 01:42:22
【问题描述】：

我创建了一个非常简单的页面，只有几个元素。我的“内容 div”周围有一个白色边框，无法弄清楚是什么原因造成的。它只出现在我的内容的顶部和左侧。我试过用 .body { border: 0; 删除它}，但这并没有帮助。还有一些关于我的 CSS 的其他事情，但解决了。

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <title>Olivera Miletic graphic desig</title>
    <link rel='stylesheet' href='style.css' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="mainText">
            <p> OLI<span class="secondColor">APPARENTLY </p>
             <p class="stayTuned"> SOON. STAY TUNED. </p>
          </div>
                  <div>
                      <p class="meanWhile"> meanwhile <a href="http://www.oliveramiletic.com" target="_blank"> WORK </a> / <a href="https://www.behance.net/olivera_m" target="_blank"> BE </a> / <a href="https://twitter.com/oliapparently" target="_blank"> TW </a> / <a href="mailto:miletic.olivera@gmail.com" > MAIL </a>
                      </p>
                 </div>
          </div>
      </body>
    </html>

这是我的 CSS：

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow:hidden;
    background-color: #6600cc;
    padding: 20px 0px 0px 50px;
    display: box;
}

.body {
    margin: 0;
}

.mainText {
    font-family: 'Open Sans', sans-serif;
    font-size: 64px;
    color: #FF0066;
    font-weight: bolder;
    line-height: 0%;
    margin-bottom: 70px;

}

.secondColor {
    color: #00ccff;
}

.stayTuned {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    color: #ffffff;
    font-weight: bolder;
}

.meanWhile {
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    font-weight: lighter;
}

a {
  color: #ffffff;
  text-decoration: none; 
}

这是 JSFiddle https://jsfiddle.net/1yL1ta5x/ 和代码：

此外，希望获得如何优化它的建议，至少针对网页的移动和桌面视图和/或对我的代码进行任何其他优化。我是一个绝对的初学者，所以请耐心等待。谢谢。

问候，

【问题讨论】：

白色边框是<body> 元素的边距。将其设置为零，它就会消失
正文的边距。 U 为“.body”设置样式，它是一个类而不是元素主体

标签： html css margin

【解决方案1】：

一些浏览器/框架/环境将默认的margin、padding 值添加到body 或html。

您必须将margins/padding 覆盖为html 或body 才能使空白消失。

只需添加以下内容：

html, body {
  margin: 0;
  padding: 0;
}

编辑

回答你的第二个问题，为什么你的container div 上有滚动条，这是因为 div 占据了其父级的 100% width 和 height 并且还占据了 20px padding-top 和 50px padding-left.
因此container div 会溢出其父级，从而产生滚动。

一般的解决方法是将box-sizing: border-box 应用于container，以便padding 包含在width 和height 中。

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #6600cc;
    padding: 20px 0px 0px 50px;
    box-sizing: border-box;
}

检查更新的小提琴：https://jsfiddle.net/1yL1ta5x/1/

我建议您阅读更多关于box-sizing 和css box model 的信息。

【讨论】：

非常感谢！我没有尝试覆盖 if 的填充，只有边距。
另外，如果你不知道我的第二个问题。我可以向上/向下和向左/向右滚动，我想我可以通过在我的内容 div 中将宽度和高度设置为 100% 来解决这个问题（我假设浏览器大小会被拾取并且不可能滚动）。你知道如何解决这个问题吗？
你的回答不仅解决了我的问题，而且你通过链接的解释对我来说是黄金！再次感谢@nashcheez

【解决方案2】：

删除 .body 并将其替换为 body。 .body 应用于名为 body 的类，而您要选择标签，这将只是 body。

或者，将 class="body" 添加到您的 body 标签中。

【讨论】：