在wysiwyg编辑器中无法处理<p>标记

Question

<p>是大多数WYSIWYG编辑器（我使用tinymce）中内容的默认根元素，其中<p>根据this不能包含块元素。当我的内容只是一个表时，页面源和呈现的元素之间存在差异：

页面来源：

   <div class="generalbox">
   <p>
   <table><tr><td>something</td></tr><table>
   </p>
   </div>

检查了Element（在Chrome和Mozila Firefox中）：

    <p></p>
    <div class="generalbox">
    <table><tr><td>something</td></tr><table>
    </div>
    <p></p>

这会在内容之前和之后产生白色间隙。我使用以下css规则来省略间隙效应，但显然没有成功：

.generalbox  p:first-of-type {
    margin-top:0;
}

.generalbox  p:last-of-type {
    margin-bottom:0;
}

我应该如何消除间隙效应？ CSS或服务器端代码还是WYSIWYG？

Answer 1

使用:empty选择器定位那些WYSIWYG的空p元素：

p:empty {
  margin: 0;
}

您还可以与:not()结合使用，以选择不是空的p元素：

p:not(:empty) { }

Answer 2

TinyMCE有一个可用的插件，允许您编辑输出的代码。这个选项可供您使用吗？如果没有，试试这个：

.generalbox {
    margin-top: -10px;
}

.generalbox + p {
    margin-bottom:0;
}