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

Question

I've created an utterly simple page with only a few elements. 我创建了一个完全简单的页面，其中仅包含几个元素。 I have a white border around my 'content div' and can't figure out what is causing it. 我的“内容div”周围有一个白色边框，无法弄清楚是什么原因造成的。 It is appearing only top and left of my content. 它仅出现在我内容的顶部和左侧。 I've tried removing it with .body { border: 0; 我试着用.body {border：0; }, but that did not help. }，但这没有帮助。 Also a few other things with regard to my CSS, but solved it. 关于我的CSS，还有其他一些事情，但是解决了。

Here is my HTML code: 这是我的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>

Here is my CSS: 这是我的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; 
}

Here is the JSFiddle https://jsfiddle.net/1yL1ta5x/ and the code: 这是JSFiddle https://jsfiddle.net/1yL1ta5x/和代码：

Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. 另外，不胜感激的建议是如何至少针对网页的移动和桌面视图进行优化和/或对我的代码进行任何其他优化。 I am an absolute beginner, so bear with me. 我是一个绝对的初学者，请耐心等待。 Thanks. 谢谢。

Regards, 问候，

Answer 1

Some browsers/frameworks/environments add default margin , padding values to either the body or the html . 一些浏览器/框架/环境会在body或html添加默认margin和padding值。

You have to override the margins / padding to the html or body for the white space to disappear. 您必须覆盖html或body的margins / padding以使空白消失。

Just add the following: 只需添加以下内容：

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

EDIT 编辑

To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left . 要回答第二个问题，为什么container div上会有滚动，这是因为div占据了其父级的width和height的100％，并且还占据了20px padding-top和50px padding-left 。
Hence the container div overflows its parent thus producing a scroll. 因此， container div溢出其父级，从而产生滚动。

A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height . 一般的解决方法是将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;
}

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

I would suggest you to read more about box-sizing , and the css box model as a whole. 我建议您阅读更多有关box-sizing的信息，以及有关CSS box模型的整体信息。

Answer 2

Remove the .body and replace it to body. 删除.body并将其替换为body。 .body is applied to the class named body, while you want to select the tag, which would be just body. .body应用于名为body的类，而您想选择标签，该标签将仅仅是body。

Alternatively, add class="body" to your body tag. 或者，将class =“ body”添加到您的body标签。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-03-07 18:06:46

解决方案2
3 2017-03-07 18:08:42

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-03-07 18:06:46

解决方案2 3 2017-03-07 18:08:42

解决方案1
3 已采纳 2017-03-07 18:06:46

解决方案2
3 2017-03-07 18:08:42