2行之后CSS被破坏（使用相同的类）

Question

有以下奇怪的问题，有7行（相同的类）但在2行之后它看起来不同。 我在css或html中找不到任何问题，这在我看来一定是有效的。

这里是css：

.archive-items dl {
border-bottom: 1px solid #4F8FCC;
padding: 0 0 8px 0;
margin: 0;
width: 310px;
}

.archive-items dl:first-child {
border-top: 1px solid #4F8FCC;
padding-top: 5px;
margin: 20px 5px 5px 0;
}

.archive-items dl a {
color: #162E4F;
text-decoration: none;
display: block;
}

.archive-items dl a:hover {
color: #B51E89;
text-decoration:underline;
}

.archive-items dl dt,
.archive-items dl dd {
margin: 0;
line-height: 1em;
height: 1em;
}

.archive-items dt {
color: #4F8FCC;
font-size: 0.9em;
padding: 0 5px 5px 5px;
}

.archive-items dd {
padding: 0 5px 5px 5px;
}

这里代码：

<div class="archive-items">
<dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl><dl>
<dt class="datum">Jan 28, 2012</dt>
<dd class="link"><a href="#">Test</a></dd>
</dl>
</div>

在这里测试http://jsfiddle.net/ZtVME/4/

这里是我看到的图像

Answer 1

这是因为第一个dl具有以下css：

.archive-items dl:first-child {
    border-top: 1px solid #4F8FCC;
    margin: 20px 5px 5px 0;
    padding-top: 5px;
}

如果您将padding的{​​{1}}更改为.archive-items dl，那么对所有人来说都是一样的。

演示： http://jsfiddle.net/ZtVME/6/

Answer 2

它实际上不是关于填充，而是关于你给第一个孩子的边际。 在Sotiris的回答中，第二个仍然与其他dl不同。

我在这里解释一下保证金。 保证金意味着：远离其他元素。 假设我们有元素A和元素B.我们给它们两个边距为30px。他们会相距多远？它们相距30px而不是60px。除非它们被父级包含，因为你要说的是在元素和它的父元素之间保持30px的空间。这两个父母显然不会流入彼此。

使用填充会增加元素本身的大小，并让您对其进行更多控制。

要记住的其他两件事。 1：给页面中的第一个（可视）元素赋予margin-top将移动body元素。 2：您的示例中不需要超过1个DL。