2017-09-21 1 views
1

Ich habe ein Problem mit Bezug auf Grenze Eigenschaft in CSS. Wenn ich border-top in die Banner-ID lege, bewegt es sich oder bleibt am oberen Blockelement (header) hängen, aber wenn ich es entferne, wird es eine ärgerliche Lücke zwischen Kopfzeile und Sektion geben. Ich weiß nicht, was das Problem ist. Bitte helfen Sie. :(Layout-Problem in CSS (Border)

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; 
} 

Antwort

3

Sie müssen innerhalb der #banner die margin-top für Ihr h1 Element entfernen.

Beispiel auf jsfiddle.

Für einige Gründe, die block Level-Element, wird die margin-top für die erste block Element, das innerhalb ist, und durch ein border setzen wird es entfernt. Lesen Sie mehr here.

1

Die 'Lücke' ist da, weil Ihre h1 eine Standard 50px margin-top (na ja, auf einer Geige ist es so).

Entfernen Sie es einfach.

Prost.