Html 为什么最后一个列表项在自定义列表中的行为不同？

我正在定制一个时间轴小部件，从中构建一个无序列表，如下所示：

<ul class="timeline">

   <!-- timeline time label -->
   <li class="time-label">
      <span class="bg-red">
         10 Feb. 2014
      </span>
   </li>
   <!-- /.timeline-label -->
   <!-- timeline item -->
   <li>
      <!-- timeline icon -->
      <i class="fa fa-envelope bg-blue"></i>
      <div class="timeline-item">
         <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>

         <h3 class="timeline-header"><a href="#">Support Team</a> ...
         </h3>

         <div class="timeline-body">
            ...
            Content goes here
         </div>

         <div class="timeline-footer">
            <a class="btn btn-primary btn-xs">...</a>
         </div>
      </div>
   </li>
   <!-- END timeline item -->

</ul>

它看起来（无论如何）好像最后一个

的
页边距底部没有应用父
样式之前的
，而前面的
样式是这样的

我可以通过使用
.empty
类引入额外的
来解决这个问题

         ...
         <div class="timeline-footer">
            <a class="btn btn-primary btn-xs">...</a>
         </div>
      </div>
   </li>
   <!-- END timeline item -->
   <li class="empty"></li>
</ul>

虽然这是可行的，但它仍然是一个黑客，所以问题是，我如何才能以更干净的方式做到这一点

编辑：这里有一个例子。
编辑2：已更新以获得我的观点
添加此项以删除底部边距：

.timeline > li:last-child {
  margin-bottom: 0;
}

要解决因将
最后一个子项的边距归零而导致的间距问题，请添加以下内容：

.timeline > li:last-child .timeline-footer {
  margin-bottom: 10px;
}

你能在Snippet或at上复制类似的演示吗？在cssAlmost中使用
：last child
到
ul
页边距底部
或
填充底部
到0，但不完全相同。这也会删除垂直空间，请参见我更新的问题中的
jsfiddle
。如果您在
.timeline>.time label>span
中添加背景色（如橙色），您将看到实际上已经没有间隔了。这是因为
上的白色背景。是的，但是在前一组的最后一个
li
和下一组的第一个
li
之间应该有一些空间，在这个空间量中有一条垂直线。是的，这很有效，至少可以节省额外的
li
，谢谢！“没问题，”阿雷德尔说。
.timeline > li:last-child {
  margin-bottom: 0;
}

.timeline > li:last-child .timeline-footer {
  margin-bottom: 10px;
}