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