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?

Possible duplicate of [I can't remove the margin between two input fields](https://stackoverflow.com/questions/9832754/i-cant-remove-the-margin-between-two-input-fields) — Alexander, Jul 10 '17 at 11:29

score 0 · Answer 1 · answered Jul 10 '17 at 11:24

0

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.

answered Jul 10 '17 at 11:24

lehel

431
4
10

I have tried adding the cellpadding, but it is no better. It renders the same in IE and Chrome. – Helen Trim Jul 12 '17 at 15:37
I found this fix: – Helen Trim Jul 13 '17 at 07:57
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. – Helen Trim Jul 13 '17 at 08:00
I see - generally you'd use a css normalizer to "reset" these default styles. Of course, this does add a bit of overhead - if you use a frontend framework like Bootstrap or Foundation - they already have this baked in! Bonus for LESS/SASS support, grid system, etc. – lehel Jul 13 '17 at 09:59

score 0 · Answer 2 · answered Jul 13 '17 at 08:01

0

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.

answered Jul 13 '17 at 08:01

Helen Trim

1
2

Unwanted padding in table cell

2 Answers2

Linked