html - 无法在所见即所得编辑器中处理 <p> 标签

Question

<p>是大多数所见即所得编辑器(我使用 tinymce)中内容的默认根元素，其中 <p>不能包含根据 this 的 block 元素.当我的内容只有一个表格时，页面源代码和呈现的元素之间存在差异:

页面来源:

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

检查元素(在 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 或服务器端代码或其他什么是所见即所得？

Answer 1

使用 :empty 选择器来定位那些所见即所得的空 p 元素:

p:empty {
  margin: 0;
}

你也可以结合:not()来选择非空的p元素:

p:not(:empty) { }