unnecessary gap is coming between header tag and section tag using html5 and css3

Question

          <!doctype html>
        <html>
        <head>
            <title>Page Title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="initial-scale=1.0">
            <style> 

                body{
                    padding:0;
                    margin:0;
                    font-family:sans-serif;
                }
                .container{

                    width:80%;
                    margin:0 auto;


                }

                header{
                    margin:0;
                    min-height:90px;
                    background-color: #344249;
                    border-bottom:#e8491d 3px solid;

                }
                header h1{
                    float:left;
                }
                h1 span{
                    margin-left:70px;
                    display:inline-block;
                    color:#db1c1c;
                }

                nav{
                    float:right;
                }        
                nav ul li{
                    display: inline-block;
                    list-style: none;
                }

                nav ul li a{
                    display:inline-block;
                    text-decoration:none;
                    padding:10px;
                    margin-top:12px;
                    color:white;
                    border:2px solid #be1414;
                    background-color:#be1414;
                    margin:5px;
                    border-radius:4px
                }

                nav ul li a:hover{
                    background-color:black;
                    color:red;

                }
                #one{
      min-height:400px;
      background:url('./img/showcase.jpg') no-repeat 0 -400px;
      text-align:center;
      color:#ffffff;
      margin:0;
    }
    #one h1{
    margin-top:100px;
        font-size:55px;
        margin-bottom:10px;
     }
                #one p{
                    font-size:20px;
                  }
      </style>
        </head>
        <body>
    <header>
        <div class="container">

            <div id="branding"> 
            <h1> <span>ė</span>View</h1>
             <nav>
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">AboutUs</a></li>
                     <li><a href="#">Services</a></li>


                 </ul>

             </nav>  

      </div>
        </div>
    </header>

    <section id="one">

        <div class="container">

            <h1> Welcome  To Tech 
            </h1>
            <p> This is a <br>
            Example </p>
        </div>
    </section>


        </body>
    </html>

Output

// Here unnecessary margin is being applied on heading h1 which is pulling my section from the header leaving unnecessary space .I have tried many ways to make this gap disabled but unable to find appropriate solution

I want to apply margin-top to the heading h1 for the section id one to make it align in center,thats why I am using #one h1{ margin:100px }

By writing margin equal to 0 inside id one with h1 is vanishing The gap between header and section,but blocking the margin facility for h1 in section with id one.

Possible duplicate of [CSS margin terror; Margin adds space outside parent element](https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element) — Temani Afif, Feb 06 '18 at 12:16
it's a margin collapsing issue, use padding istead or keep the margin and add a small padding to parent container — Temani Afif, Feb 06 '18 at 12:17

Nik Hendricks · Answer 1 · 2018-02-06T15:32:52.657

Try this for you header

.header{
     position:absolute;
     top: 0;
     right: 0;
     left: 0;
     height:90px;
     background-color: #344249;
     border-bottom:#e8491d 3px solid;

}

#one h1{

margin-top:100px;
    position: absolute;
    top:90px;
    font-size:55px;
    margin-bottom:10px;
 }

and instead of making a tag <header> just make a <div class="header">

you might have to do some tweaking with your other css rules just comment if you have any problems :)

score -1 · Answer 2 · answered Feb 06 '18 at 12:22

-1

Change margin-top to padding-top

#one h1{
    padding-top:100px;
    font-size:55px;
    margin-bottom:10px;
 }

Basically, margin pushes outside and padding spaces inside elements.

answered Feb 06 '18 at 12:22

Gezzasa

1,443
8
17

@Gezzzasa It is resolved now. One alternate way is to write overflow:hidden inside container class,but I am not getting any valid points that how it is also a solution to the above mention problem . – Danny Feb 06 '18 at 14:06
@Danny because it's not a problem :) this is called margin-collapsing as i commented above, read about it and you will understand how it works and how to avoid it – Temani Afif Feb 06 '18 at 14:17

unnecessary gap is coming between header tag and section tag using html5 and css3

2 Answers2