CODEWITHSUNDEEP
htmlcssmargin
user6106957
user6106957

Reputation:

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:[email protected]" > 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,

Upvotes: 3

Views: 16591

Answers (2)

nashcheez
nashcheez

Reputation: 5183

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.

Upvotes: 11

Rahul Bhatnagar
Rahul Bhatnagar

Reputation: 106

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.

Upvotes: 4

Related Questions