Question

Have following strange issue, have 7 lines (same classes) but after 2 lines it’s looks different.
I cannot find any problems in css or html, and this must be working in my opinion.

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

here code:

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

Tested here http://jsfiddle.net/ZtVME/4/

here image what I see

Answer 1

this happens because the first dl has the following css:

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

If you change the padding of .archive-items dl to padding: 5px 0 8px; will be the same for all.

Demo: http://jsfiddle.net/ZtVME/6/