Question

我的<p>标记周围有多余的填充，在查看时在浏览器和电子邮件客户端中可见，但是在html中看不到它。我不希望<p>标记上方和下方有任何填充。当我在浏览器中查看html并查看源代码时，我可以看到添加了“”文本节点，但是在html中看不到它们，因此无法删除它们。有人可以帮我删除<p>标签上方/下方的多余填充吗？

<table border="0" cellpadding="0" cellspacing="0" class="flexibleContainer" width="100%">
<tbody>
    <tr>
        <td align="center" valign="top">
        <table bgcolor="f2f1ee" border="0" cellpadding="0" cellspacing="0" class="flexibleContainer" style="width:580px; padding-top: 0px; padding-bottom: 0px;" width="580">
            <tbody>
                <tr>
                    <td align="left" class="narrowFlexibleContainerCell" style="width:580px;padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;" valign="top" width="580">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td align="center" class="narrowFlexibleContainerCell" style="width:560px; padding-right: 0px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;" valign="top" width="560">
                                <table bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left" class="textContent" valign="top"> 
                                            <p style="padding-right: 20px; padding-left: 20px;padding-top: 0px; padding-bottom: 0px; margin: 0em "><Lorem Ipsum: </strong><br />
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate convallis risus sed sollicitudin. Suspendisse vel arcu vel erat dapibus tincidunt. Nunc quis orci imperdiet, lobortis quam at, mollis lacus. Aliquam mattis mi bibendum ultrices mattis. Fusce a felis lacinia felis elementum imperdiet.</p>
                                              </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <p style="font-size: 5px;"> </p>
                    </td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>

Answer 1

您有一个strong标记，该标记在文本的第一部分附近没有正确打开：

<Lorem Ipsum: </strong>

必须是：

<strong>Lorem Ipsum: </strong>

Answer 2

在结尾处，您有一个空的段落，其font-size设置为5px；即

<p style="font-size: 5px;"> </p>

尝试删除其周围的空白，如下所示：

<p style="font-size: 5px; margin: 0;"> </p>

Answer 3

这个p？

<p style="font-size: 5px;"> </p>

如果是这样，则与代码中的其他段落标签不同，您在该标签上没有margin: 0;。

有趣的是，许多HTML元素都有默认边距。多余的空间是margin-top和margin-bottom，而不是填充。将样式设置为margin: 0;将消除这种情况。

便捷列表：https://www.w3schools.com/cssref/css_default_values.asp

添加了文本节点，但在html中不可见

3 个答案: