CODEWITHSUNDEEP
htmlcss
user3882522
user3882522

Reputation: 51

There's white space on the top of my html page?

The problem is the

tag in my "Title" div, everything looked fine until I added it there and then a white space appeared on the top of my page, I tried messing around with my other divs but can't seem to figure out what's wrong. 

        ***html***

<!DOCTYPE html>
<html>
<head>
<Title>Stuff</Title> 
<link rel="stylesheet" type="text/css" href="mainPage.css">
<meta charset="UTF-8">
<meta name="description" content="Stuff">
<meta name="keywords" content="Stuff">
</head>
<body>
<div id ="pageWrapper">
<div id="headerWrapper">
<div id="headerTransparentDiv">


<div id="Title">
   <p>Stuff</p>  <!--The problem is when I added the <p> tag a white space appeared on top of the page-->
</div>

     <div id ="menuBar">
         <div class="menuItems">

         </div>
     </div>

    </div>
  </div>

     <div ="mainContentWrapper">

     </div>

     <div id="footer">

     </div>
  </div>

  </body>
  </html>


    ***css***

body{margin:0; padding:0;   }
#pageWrapper{width:100%;height:1000px;background-color:black; background-    image: url("https://darthmojo.files.wordpress.com/2009/03/bsg-stars.png");background-size: 100% 100%;
background-repeat:no-repeat;}
#headerTransparentDiv{
height:100%; width:100%; background: rgba(0, 0, 100, 0.2);
 }
#headerWrapper{

position:relative;
margin-right:auto;
margin-left:auto;
background-image: url("http://horoscopespot.net/wp-content/gallery/pisces/pisces-shadow.jpg");
width:85%;
height:800px;
background-size: 100% 100%;
background-repeat:no-repeat;
  }

#Title{width:100px;height:100px; position:relative;left:100px;top:100px;}
#Title p{font-size:50px; color:white; 
text-shadow:0 0 10px white,  0 0 20px white, 0 0 30px white,  0 0 40px   #00FFFF, 0 0 70px #00FFFF,  0 0 80px #00FFFF,  0 0 100px #00FFFF,  0 0 150px  #00FFFF;}

Upvotes: 0

Views: 1229

Answers (2)

answer99
answer99

Reputation: 251

the Default properties are causing a problem. you can override the p default CSS properties.

p {
    display: inline;
}

or 

p {
    margin:0;
}

if you don't want to overwrite the p default property. Use

p {
    float: left;
}

Upvotes: 0

atmd
atmd

Reputation: 7490

Thats because p tags have margin added by default to the top and bottom, try:

p{
  margin:0;
}

or simply margin-top:0; if you want to keep the bottom margin

You can read the default css file loaded by browsers here firefox, webkit

Upvotes: 2

Related Questions