html - 边框后的额外行

Question

如果我使用此代码，不幸的是我会在虚线边框后得到额外的“行”。你能帮我吗，如何将边框后的“空格”设置为 0？

<td style="height:50px; line-height:10px; margin-top:10px;" >
   <div class="test"><p>test line 1</p></div>
   <div class="test"><p>test line 1</p></div>
   <div class="test"><p>test line 1</p></div>
   <div class="test"><p>test line 1</p></div>

</td>




.test {
    border-top-style:dotted; 
    border-top-width:1px; 
    border-top-color:#999;
    margin-top:-10px;
    margin-bottom:-10px;

 }

谢谢。

Answer 1

为什么不这样写呢？

<style type="text/css" media="screen">
  .test {
    padding: 0;
  }
  .test li{
    border-top: 1px #999 dotted;
    list-style: none;
    padding: 10px 0 0 0;
  }
</style>

<ul class="test">
  <li>test line 1</li>
  <li>test line 2</li>
  <li>test line 3</li>
</ul>