Question

我有一个带有圆角包装的网页。包装器中的第一件事是页眉，但在它上面有一个白色空间，角落在哪里。我希望蓝色标题从包装器的顶部开始，因此顶部没有空白区域。我不知道这是否可行，但任何帮助将不胜感激！这是（简化）代码。我用内联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＆gt; http://jsfiddle.net/znfa0Lkf/

Answer 1

在您的代码

中添加此内容

* {
  padding: 0;
  margin: 0;
}

并添加到包装器overflow:hidden;

Answer 2

JSFiddle

您需要将margin-top:0;添加到h1样式，因为它会强行降低。

然后，您需要添加

border-top-left-radius:25px;
border-top-right-radius:25px;

到#header。

或者，将overflow:hidden;添加到#wrapper。作为Woodrow Barlow said in the comments:

如果你试图完美匹配彼此顶部的圆角（渲染并不完美），某些浏览器会绘制底层元素的一小部分

附注：如果将px设置为0，则无需添加margin-top:0;。例如，您可以margin-top:0px，而不是{{1}} 。

Answer 3

正如所建议的那样，您将从简单的CSS reset中受益。默认情况下，浏览器会向某些元素添加某些填充和边距 - 通过明确否定它，您可以定义自己的填充和边距。另一个优点是，因为＆＃34;默认＆＃34;可能因浏览器而异，您可以获得更加一致的结果。

重置很简单。将其添加到CSS的顶部：

* {
margin:0;
padding:0;
}

添加一些更改，使您的网页按照您的预期方式进行。首先，我们将margin:10px（根据需要进行调整）添加到#wrapper（这使得您的圆角框就像之前一样，而不是砸到页面顶部）。接下来，将overflow:hidden添加到#wrapper。由于#header没有圆角，因此#wrapper通常会有方角溢出，但overflow:hidden会阻止它。

这是live demo。

请注意，如果您不想，则不需要使用CSS重置。如果您愿意，可以向margin-top:0选择器添加h1。在这种情况下，您不需要将margin添加到#wrapper，但您仍然需要设置overflow:hidden。这是该版本的live demo。

Answer 4

这将对您有所帮助：

*{
  margin:0;
  padding:0;
}

默认情况下，包括正文在内的多个元素都有边距和填充，因此您可以看到空间并将边距和填充值设置为0，所有选择器（*）将删除边距和填充值，或者说没有空格在你的文件中。

Answer 5

问题1＆gt;你的＆＃34; Wrapper＆＃34;

周围的边距

你正在获得围绕你的＃34; Wrapper＆＃34;由于＆＃34; <body>＆＃34;中的默认边距您需要做的就是删除＆＃34; <body>＆＃34;

中的默认保证金和填充

问题2＆gt; ＆＃34; Blue Header＆＃34;

上方的边距

添加margin-top: 0px;因为它取<h1>

的默认保证金

问题3＆gt;从H1

中删除边距时删除半径

将overflow:hidden;添加到＆＃34; #wrapper＆＃34;因此<h1>和 header 保留在 wrapper 内，并且不会取代该样式。

以下是最终修复补充：

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #999999;
    margin:0 auto; /*FIX ADDED*/
    padding:0; /*FIX ADDED*/
}
h1 {
    line-height: 200%;
    margin-bottom: 0px;
    margin-top: 0px; /*FIX ADDED*/
}



 #wrapper {
    background-color: #FFFFFF;
    min-width: 760px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #a1a1a1;
    border-radius: 25px;
    overflow:hidden;  /*FIX ADDED*/
}

这是工作小提琴＆gt; http://jsfiddle.net/0w646ba1/

**抱歉，错过了为标题上方的空格添加修复。

Answer 6

#header h1
{
    background-color: #40ebff;
    color: #FFFFFF;
    padding-left: 5px;
    margin:0;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
}

http://jsfiddle.net/4g1j45L9/1/

使用CSS圆角将标题扩展到页面顶部

6 个答案:

问题1＆gt;你的＆＃34; Wrapper＆＃34;

问题2＆gt; ＆＃34; Blue Header＆＃34;

问题3＆gt;从H1

这是工作小提琴＆gt; http://jsfiddle.net/0w646ba1/