Html 消除<；部门>；要素

我在做一个私人项目，但我在做一个div时遇到了一些困难，它有一些我似乎无法理解的样式。这是我的用户界面顶部的一条细条，用户可以通过它控制屏幕上显示的内容。保留是非常重要的（因此删除它不是一个选项）。如果有帮助的话，我使用Eric Meyer的CSS重置作为规范化器

我的问题是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;

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

---

希望这能有所帮助。

需要注意的是您的

。按钮
正在跨距内使用，因此您不能添加上下边距。内联元素没有高度类型属性<代码>显示：块
会使页边距正常工作，但我建议您使用
。当然，我的评论不会解决你的问题，它只是一个评论。谢谢你指出这一点！实际上，我在其他一些地方使用了.button类，这在语义上是有意义的。它是父元素！事实上，这是祖父母的因素，但非常感谢你指出这是一种可能性。在看了一会儿屏幕后，我的大脑变得一团糟。
div.new_entry_control_container{
  padding:0;
  /* more CSS here */
}
.credits{
  padding:0; margin:0;
  /* other CSS  here */
}

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