表格单元格中不需要的填充

Posted 2023-03-06

【中文标题】表格单元格中不需要的填充

【英文标题】：Unwanted padding in table cell

【发布时间】：2017-12-14 02:29:40

【问题描述】：

我的网页不像在设计视图中那样显示。它在带有文本框的表格单元格周围添加了填充，但没有其他地方。我想要它没有填充。

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

在设计中，它看起来没有填充。运行时，它会出现在文本框上方和下方的填充，与文本框高度大致相同。

我尝试为面板、表格和单元格设置"padding:0px;"，但它仍然保持不变。我还能尝试什么？

【问题讨论】：

I can't remove the margin between two input fields的可能重复

【参考方案1】：

也许它是直接在桌子上的单元格填充？ look here;尝试将其设置为 0

也许是浏览器本身为其添加了一些默认样式 - 在 Chrome 中，打开检查器（F12 或右键单击 -> 检查元素），您可以在其中看到应用于元素的内容。

【讨论】：

我已经尝试添加 cellpadding，但效果并不好。它在 IE 和 Chrome 中呈现相同的效果。

我找到了这个修复：

我找到了这个修复：p margin: 0;填充：0；我将它添加到 css 中，它解决了问题。它就是其中之一“嗯，呃！”解决方案。

我明白了 - 通常你会使用 css 规范化器来“重置”这些默认样式。当然，这确实会增加一些开销——如果你使用像 Bootstrap 或 Foundation 这样的前端框架——他们已经有了这个！ LESS/SASS 支持、网格系统等的奖励。

【参考方案2】：

我找到了这个修复：

p 
    margin: 0;
    padding: 0;

我将它添加到 css 中并解决了问题。它就是其中之一“嗯，呃！”解决方案。