Question

If i use this code, unfortunatelly i get extra “row” after the dotted border. Could you help me, how can i set the “space” to 0, after the border?

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

 }

Thank you.

Answer 1

why not write on this way?

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