消除<div>元素</div>上的内在填充/边距

Question

我正在开发一个个人项目，但是我遇到了一些div的困难，它有一些我似乎无法解决的样式。它是我用户界面顶部的一个细条，用户可以对屏幕上显示的内容进行一些控制。保持身边非常重要（因此删除它不是一种选择）。如果它有帮助，我使用Eric Meyer的CSS Reset作为规范化器。

我的问题是div元素似乎有一些内在的边距或填充，我似乎无法在我的CSS中解决。我在这里附上照片以供参考; div是绿色的。

我需要让绿色div元素更薄。如果我可以将它移到靠近页面顶部的位置，它将有助于布局。如果您有任何想法或看到我错过的内容，我将非常感谢您的帮助。

我还包括该内容的html代码如下：

<div class="new_entry_control_container">
    <p>You have <span class="credits">33 Credits</span> remaining.
        <span class="button">Add More Credits</span>
        <span class="button">Add More Items to Study List</span>

        <span class="pagination">&#60; 1 | 2 | 3 &#62;</span>
    </p>
</div>

以及适用于此处的CSS：

div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}

div.new_entry_control_container p {
    text-align: center;}

.credits {
    color: #ffd400;}

.button {
    background-color: #ffd400;
    color: #3a0091;
    border: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 1px 8px 4px 8px;
    margin: 10px 0px 0px 3px;}

.pagination {
    margin-left: 25px;
    font-size: 17px;}

Answer 1

尝试：

div.new_entry_control_container{
  padding:0;
  /* more CSS here */
}
.credits{
  padding:0; margin:0;
  /* other CSS  here */
}

Answer 2

不确定是否由该绿色条的父元素填充引起。解决方法是使用否定的“margin-top”。并且为了使它更薄（假设该条中只有一条线），使用“高度”结合“线高”。

所以css可能看起来像这样

div.new_entry_control_container {
  background-color: green;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  margin-top: -10px;
  height: 18px; line-height: 18px;
}

希望有所帮助。