Remove spacing in a TD element that contains a list [duplicate]

Question

I'd like to remove the padding present in the first row in the table, so it is the same height as the second row. I'm not sure where the padding is coming from, as I've set the padding to zero in the td ul and li elements.

http://jsfiddle.net/d9no97vL/

<table>
  <tr>
    <td><ul><li>abc</li><li>def</li></ul></td>
    <td>this row is too wide</td>
  </tr>
  <tr>
    <td></td>
    <td>this row is just right</td>
  </tr>
</table>

And the css:

ul li { display: inline; margin: 0; padding: 0; }
table { border-collapse: collapse; border: 1px solid black; }
td { padding: 0px; border: 1px solid black; }

Answer 1

That's because of the default padding/margin on the ul element (dictated by the browser style sheets). Add the following:

ul { margin: 0; padding: 0; }

DEMO