CODEWITHSUNDEEP
htmlcssmarginpaddingspacing
user2440477
user2440477

Reputation: 91

How do I identify this strange white space at the top of my page?

I want there to be a distance of 60px between the top of the page and my header where the logo sits. However, there seems to be 16px of white space there already. Because of this I have just added a margin-top of 44px to the header, achieving what I wanted.

But I would much rather identify where the 16px of white space is coming from, not only to learn from it but also to make it neater: if I could just expand the white space instead of adding any margin, that would be ideal.

I don't think the mystery space is margin nor padding... I have no idea what it is.

Upvotes: 0

Views: 344

Answers (3)

Mohammad Masoudian
Mohammad Masoudian

Reputation: 3501

in your HTML file Line 68 change the body tag style to this :

body {
    line-height: 0;
    background: url("http://www.yoursite.com/wp-content/themes/modernist/style/../images/back_01.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: "RobotoRegular", Arial, sans-serif;
    color: #606060;
    margin: 0;
}

Upvotes: 0

gkalpak
gkalpak

Reputation: 48211

In your div.wrapper, right before your div.header you have a br. That is your 16px !

<div class="wrapper">
    <div class="content">...</div>
    <br style="clear:both;">   <!-- mysterious 16px -->
    <div class="header">

Upvotes: 0

Michael K. Sondej
Michael K. Sondej

Reputation: 963

There is a:

<br style="clear:both;"></br>

Inside your 'wrapper' div, just below the 'content' div. It's basically a new line, it's 16px tall because of the 16px font size which is the default.

Use your browser's page inspector for things like that. It is a handy tool for examining your page's structure and looks.

Upvotes: 1

Related Questions