Unknown white border around my content

问题

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. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.

Here is my HTML code:

<!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:

.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:

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,

回答1:

Some browsers/frameworks/environments add default margin, padding values to either the body or the html.

You have to override the margins/padding to the html or body for the white space to disappear.

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.
Hence the container div overflows its parent thus producing a scroll.

A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and 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/

I would suggest you to read more about box-sizing, and the css box model as a whole.

回答2:

Remove the .body and replace it to body. .body is applied to the class named body, while you want to select the tag, which would be just body.

Alternatively, add class="body" to your body tag.

来源：https://stackoverflow.com/questions/42655242/unknown-white-border-around-my-content

标签

html

css

margin