Extra row after border

Question

Hello!

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

The CSS class test is not being used in your example above. Maybe you forgot to paste some of the relevant parts. And have you set

border-collapse: collapse;

In the CSS for your table?

Answer 2

A margin has no meaning on a table cell. Do you want to set the padding?

The HTML seems strange. You have a single table cell with a margin with four divs inside. Could you post the whole table?

Answer 3

Tried setting .test p { margin: 0; }?

Answer 4

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>