CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 17

HTML/CSS body isnt at the top of the page

I am having a problem with my HTMl/CSS. it seems like my body tag has somehow got a margin-top of 10px... However I cannot find anyway to get rid of it. The other websites I have built has never done this, so any help would be appreciated.

THE CODE:

HTML

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js_plugins/skrollr.js"></script>
        <link rel="stylesheet" type="text/css" href="theme.css">
        <link rel="stylesheet" type="text/css" href="text.css">
        <title>MyPage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>  
    <body>
        <div id="maincontent">
            <section id="maincontent-sect-intro" >
                <div id="maincontent-sect-intro-content">
                    <p class="name-intro">Introduction</p>
                </div>
            </section>
        </div>
    </body>
</html>

CSS

body
{
    width: 100%;
    margin: 0px;
}
div#maincontent
{
    min-width: 1000px;
    width: 100%;
}
section
{
    margin-top: 0px;
    height: 550px;
    width: 100%;
}
/*
For intro section
*/
section#maincontent-sect-intro
{
    background-color: #666666;
    text-align: center;
}
div#maincontent-sect-intro-content
{
    text-align: center;
}

Upvotes: 0

Views: 99

Answers (3)

Vis
Vis

Reputation: 41

You need to set padding and margin both.

padding:0
margin: 0

Upvotes: 0

Blake
Blake

Reputation: 571

Your problem here is the p class "name-intro" <p> tags automatically give a margin top of 1em. just add this to your css

.name-intro {
  margin: 0;
}

also a rule of thumb, when specifying 0 values, never add pixel or em, just leave it as zero :)

Upvotes: 4

sundanlotion
sundanlotion

Reputation: 43

You might have to change the CSS to :

body, html {
    width: 100%;
    margin: 0;
}

Upvotes: -1

Related Questions