html - 消除 <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

不确定它是否是由那个绿色条的父元素的填充引起的。解决方法是使用负“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;
}

希望对您有所帮助。