Unwanted padding in table cell

Question

I have a web page that does not appear as it does in design view. It adds padding around table cells with text boxes in, but nowhere else. I want it without the padding.

This is the html:

<asp:Panel ID="PlayerPanel" runat="server" BackColor="#3333CC">
<table id="PlayerTable" style="width:100%;" border="0">
<tr>
<td >Name</td>
<td><asp:textbox id="txtPlayerName" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
<tr>
<td >Mobile</td>
<td><asp:textbox id="txtPlayerMobile" runat="server" Width="400px" AutoPostBack="True" ></asp:textbox></td>
</tr>
<tr>
<td >Email</td>
<td><asp:textbox id="txtPlayerEmail" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
</table>
</asp:Panel>

In design, it appears without padding. When running, it appears with padding above and below the textbox of about the same height as the textbox.

I have tried setting "padding:0px;" for the panel, the table and the cell, but it still stays the same. What else can I try?

Answer 1

I found this fix:

p {
    margin: 0;
    padding: 0;
}

I added this into the css and it fixed the problem. It is one of those 'Well, duh!' solutions.

Answer 2

Maybe it's cellpadding directly on the table? look here; try setting that to 0

Maybe it's the browser itself putting some default styling on it - in Chrome, open up inspector (F12 or right click -> inspect element) and there you can see what's being applied to the element.