1

I have an issue with regards to border property in CSS. When I put border-top inside the banner id it will move or stick to the upper block element (header) but if I remove it it will have an annoying gap between header and section. I don't know what is the issue. Please help. :(

HTML

    <header>   
    </header>
    <section id="banner">
            <h1>Test</h1>
    </section>

CSS

body {
    font-family:Arial, Verdana, sans-serif;
    padding:0;
    margin:0;
    background-color:#f4f4f4;
}

header {
    background:#333333;
    color:#ffffff;
    height:80px;
    border-bottom:red 5px solid;
}

header nav {
    float:right;
}

/*issue is here*/
#banner {
    height:500px;
    text-align:center;
    color:#ffffff;
    border-top:red 5px solid;/*remove this line and see*/
    border-bottom:red 5px solid;
    background-color:green;
}

#banner h1 {
    font-size:50px;
}
Kalamarico
  • 5,466
  • 22
  • 53
  • 70
FrankDe
  • 23
  • 2

3 Answers3

3

You need to remove the margin-top for your h1 element inside the #banner.

Example on jsfiddle.

For some reasons, the block level element, will take the margin-top for the first block element which is inside, and by setting a border it is removed. Read more here.

Florin Pop
  • 5,105
  • 3
  • 25
  • 58
1

The 'gap' is there because your h1 got a default 50px margin-top (well, on a fiddle it's like that).

Just remove it.

Cheers.

Chaaampy
  • 243
  • 1
  • 10
0

You can also use CSS Reset https://meyerweb.com/eric/tools/css/reset/ first to fix multi-browser compatibility.

html, body, div, span, applet, object, iframe etc.

Example On: jsfiddle https://jsfiddle.net/wtqfp1vw/

Zinox
  • 519
  • 9
  • 24