Can not handle <p> tag in wysiwyg editor

Question

The <p> is the default root element of content in most of WYSIWYG editors (I use tinymce) where <p> can not contain a block element according to this . When my content is only a single table there is a difference between page source and the rendered elements:

Source of page:

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

inspected Element (in both Chrome and Mozila Firefox):

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

This causes a white gap before and after the content. I used the following css rule to omit the gap effect but obviously no success:

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

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

How should I remove the gap effect? CSS or a server side code or something is WYSIWYG?

Answer 1

TinyMCE has an available plugin that allows you to edit the code of your output. Is that option available to you? If not, try this:

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

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

Answer 2

Use :empty selector to target those WYSIWYG's empty p elements:

p:empty {
  margin: 0;
}

You can also combine with :not() to select not empty p elements:

p:not(:empty) { }