CSS(边界)中的布局问题

Question

我在CSS中的边框属性方面存在问题。当我将边框顶在横幅ID中时，它将移动或粘在上部块元件（标头）中，但是如果我删除它，则标题和截面之间会有烦人的缝隙。我不知道有什么问题。请帮忙。：（

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

Answer 1

您需要在#banner内部删除h1元素的margin-top。

jsfiddle上的示例。

由于某些原因，block级元素将用于内部第一个block元素的margin-top，并通过设置border将其删除。在这里阅读更多。

Answer 2

'gap'之所以存在，是因为您的h1获得了默认的50px margin-top（嗯，在小提琴上，就是这样）。

只需删除即可。

欢呼。

Answer 3

您还可以使用CSS RESET https://meyerweb.com/eric/tools/css/reset/首先修复Multi-Browser兼容性。

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

示例on：jsfiddle https://jsfiddle.net/wtqfp1vw/