Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    90
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why the white space?

    Really simple, here is my HTML and CSS.. my page has a approx 10px white space at the top, why?

    Code:
    <!DOCTYPE html>
    <html>
    <title>2019</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="css/second.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <body>
    <div class="black-bar">
        <div class="black-bar-container">
            <ul>
                <li>Balance</li>
                <li>Date</li>
                <li>Sim Status</li>
            </ul>
        </div>
    </div>
    
    <div class="container">
        <div class="header">
            <div class="header-container">
                <div class="logo">
                    <img src="">
                </div>
                <div class="menu">
                    <ul>
                        <li>Head Office</li>
                    <ul>
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>
    Code:
    html{
        margin:0px;
        padding: 0px;
        color: white;
    }
    
    .black-bar{
        top: 0px;
        width: 100%;
        background-color: black;
        height: 33px;
    }
    
    .black-bar-container{
        margin: 0px auto;
        width: 1000px;
        line-height: 33px;
    }
    
    .black-bar-container ul{
        text-align: right;
    }
    .black-bar-container li{
        color: #CCC;
        text-transform: uppercase;
        display: inline-block;
        margin: 0px 10px;
        font-size: .7rem;
    }
    
    .container{
        background-image: url("../images/blank2.jpg");
        width:100%;
        height:100vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: center;
    }
    
    .header{
        height: 118px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.75)
    }

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,414
    Thanks
    7
    Thanked 1,377 Times in 1,346 Posts
    Because the body element has a default margin (not the html element). You need to move your margin and padding resets from html to body.

  3. #3
    New to the CF scene
    Join Date
    May 2019
    Location
    Ahmedabad
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Replace your CSS code for html/body by this code which in turn will eliminate the top white-space:

    Code:
    html{
        margin: -15px;
        padding: 0px;
        color: white;
    }
    By default, body takes "8px" margin so we need to over-write it.

    Else you can also set overflow:hidden to the block element(eg: div) present inside the body tag for temporary solution.

  4. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,599
    Thanks
    3
    Thanked 641 Times in 627 Posts
    Hi there Sherin Mathew,

    have you not considered that...

    Code:
    
    body {
        margin-top: 0;
     }

    ...is the simple solution to the O.P.'s problem ?

    coothead
    ~ the original bald headed old fart ~

  5. #5
    New to the CF scene
    Join Date
    May 2019
    Location
    Ahmedabad
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi @coothead, Logically it's right but it won't solve the problem over here.We need to provide -15px margin to body or else need to provide margin-top:0px to ul

    Here, ul pushes down all the code which in turn is generating white space at the top.

    @Kiwis, you can even try using below code to resolve your issue.
    Code:
    ul{
    margin-top:0px;
    }
    Last edited by Sherin Mathew; Sep 24th, 2019 at 09:22 AM.

  6. #6
    New to the CF scene
    Join Date
    Sep 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    “whitespace” is negative space and it is not a blank space and it is used for design. It helps to focus on your visual attention.The main purpose of "white space" is, It balances the rest of the design by throwing what is on the page (or the screen) into relief. Whitespace is a fundamental element of design for good reason and that impact on the effectiveness of your site. White space provides many benefits like Improved legibility, Higher comprehension, Increased attention, Creates the right tone (sometimes).
    To learn more about Websites, visit to Lighthouse inda.
    https://www.lighthouseindia.in/


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •