如何摆脱包装器中的额外空白区域

Question

正如您在示例图片上看到的那样，“新闻”标题上方有一些类型的空白区域（填充？边距？）我尝试过使用padding-top，margin-top但我没做过任何事情摆脱白色空间。谢谢！

HTML：

<div id="news_wrapper">
    <div id="newsheader">
        <p>News</p>
    </div>
    <div class="news">
        <p>"News Post 1"</p>
    </div>
    <div class="news">
        <p>"News Post 2"</p>
    </div>
    <div class="news">
        <p>"News Post 3"</p>
    </div>
    <div class="news">
        <p>"News Post 4"</p>
    </div>
</div>

CSS：

#news_wrapper {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 650px;
height: auto;
margin: 6px;
}

#newsheader {
background-color: Black;
color: white;
width: auto;
margin: 0px;
height: 30px;
text-align: center;
font: 'Helvetica', sans-serif;
text-transform: bold;
}

.news {
display: block;
margin: auto;
text-align: center;
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 4px;
}

Answer 1

我认为问题出在您的margin: auto

上

我通常使用margin: 0 auto来表示这种效果。

Answer 2

将此添加到您的css

#newsheader p{
  margin:0;
}