CODEWITHSUNDEEP
htmlcss
Rguarascia
Rguarascia

Reputation: 193

Space between DIV and Top

I have a space between the top of my website and the top div, I have set both to have no margins but it still has a space. Can anyone tell me what it is I am doing wrong here? I thought setting the margins to 0 would fix it but apparently not.

HTML

<div class="topPanel">
<p>TITLE</p>
</div>

CSS

.topPanel
{
background-color:#FFFFFF;
width:100%;
height:auto;
font-family: Copperplate, "Copperplate Gothic Light", fantasy;
color:#000000;
font-weight:100;
font-size:36px;
text-align:center;
margin: 0;
padding: 0; 
}

body
{
background-color:#E3E3E3;
margin: 0;
padding: 0; 
}

Sample image Sample image

Upvotes: 1

Views: 4262

Answers (2)

arielnmz
arielnmz

Reputation: 9145

Many browsers set default padding/margin values for certain tags, specially body, head and html, which contain all elements inside them. So you may set them to a value of 0px to be sure you get what you want.

html, head, body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

Also, make sure the p tag itself doesn't have any kind of padding/margin, as well as your div (divs don't have any by default, but just to be sure):

p, div {
    padding: 0px;
    margin: 0px;
}

Upvotes: 1

random_user_name
random_user_name

Reputation: 26160

The issue is the margin on your p tag is pushing your div down.

The possible solutions are:

1) Change your p style to have zero top margin

or

2) Add padding-top: 1px to your div

or

3) Add some border-top to your div.

If the p tag has margin, but nothing to "push off of" within the div, the entire div will move down to accomodate the margin-top of the p tag.

Upvotes: 2

Related Questions