0

I have code below in my Wordpress TinyMce editor:

<section style="box-sizing: border-box;"><section style="display: inline-block; vertical-align: middle; width: 50%; box-sizing: border-box; background: red; height: 30px;"></section><section style="display: inline-block; vertical-align: middle; width: 50%; box-sizing: border-box; background: blue; height: 30px;"></section></section>

Then I have this as outcome: Two element block in a same row

However, when wordpress render this html, it will beautify the Html and turn my raw html to the following:

<section style="box-sizing: border-box;">
<section style="display: inline-block; vertical-align: middle; width: 50%; box-sizing: border-box; background: red; height: 30px;"></section>
<section style="display: inline-block; vertical-align: middle; width: 50%; box-sizing: border-box; background: blue; height: 30px;"></section>
</section>
Two elements not in the same row

After hours research. I notice that is because the space between two inline-block. I have tried the "font-size: 0" method and it work perfectly in this simple case.

However, sometimes I need to copy a complicated raw html to my Wordpress site. Adding a "font-size:0" attribute will mess up the entire thing. Thus, I am looking for a solution without touch the html and wondering if any one can tell me how to disable this auto formatting in Wordpress or just disable the "auto new line" at the end of each elements.

Thanks very much :-]

Martin Ma
  • 55
  • 1
  • 7
  • please take the time to read ALL the answers to know all the way to deal with that space – Temani Afif Jul 15 '18 at 23:39
  • Hi Temani, the problem for me is I need to copy many complicated raw html. And they are actually working! And it mess up only because WP add a new line at the end of my element. Currently those solution require me to modify HTML a lot. Therefore, I need a solution without touching the HTML. – Martin Ma Jul 15 '18 at 23:55
  • that's why I told you to read all the answers : https://stackoverflow.com/a/33257267/8620333 as you don't need to touch the html – Temani Afif Jul 15 '18 at 23:56
  • https://stackoverflow.com/a/19039075/8620333 – Temani Afif Jul 15 '18 at 23:58
  • https://stackoverflow.com/a/19038859/8620333 – Temani Afif Jul 15 '18 at 23:59
  • Hi Temani, these solution doesn't help. Because Wordpress will add a newline at the end of each elements when it render to post. – Martin Ma Jul 16 '18 at 00:34
  • I now reading the source code in formatting.php, but just can't find where it put the "\n" to each elements. – Martin Ma Jul 16 '18 at 00:36
  • One solution is install Plugin "Raw HTML". Since it's marked Duplicated. I can't answer myself. Hopefully this can help others. – Martin Ma Jul 16 '18 at 00:44

0 Answers0