html - 使用 CSS 圆 Angular 将页眉扩展到页面顶部

Question

我有一个使用圆 Angular 包装的网页。包装器中的第一件事是页眉，但它上面有一个空白区域，即 Angular 所在的位置。我希望蓝色标题从包装器的顶部开始，因此顶部没有空白。我不知道这是否可行，但我们将不胜感激!这是(简化的)代码。我使用内联 CSS 来发布这个。

HTML

<div id="wrapper">
    <div id="header">
         <h1>Test Page</h1>

    </div>
    <!--header-->
    <div id="nav"> <a href="index.html">Home</a>  <a href="index.html">Link 1</a>  <a href="index.html">Link 2</a>  <a href="index.html">Link 3</a>  <a href="index.html">Link 4</a>

    </div>
    <!--nav-->
    <div id="main">
        <p>This is the test page.</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <!--main-->
</div>
<!--wrapper-->

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #999999;
}
h1 {
    line-height: 200%;
    margin-bottom: 0px;
}
a {
    padding-left: 10px;
    padding-right: 10px;
    color: #000000;
}
#wrapper {
    background-color: #FFFFFF;
    min-width: 760px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #a1a1a1;
    border-radius: 25px;
}
#header {
    background-color: #40ebff;
    color: #FFFFFF;
    padding-left: 5px;
}
#nav {
    font-weight: bold;
    background-color: #ffdab2;
    padding: 5px;
}
#main {
    padding-left: 20px;
    padding-right: 20px;
}

FIDDLE > http://jsfiddle.net/znfa0Lkf/

Answer 1

在你的代码中添加这个

* {
  padding: 0;
  margin: 0;
}

并添加到包装器 overflow:hidden;