We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Margin-top and bottom?


can someone please tell me, where the RTE takes its margin top and bottom between paragraphs from? I can't find it. But its there if I look into the layouting with the debug-options no matter if IE or FF.

5 Replies

PO Prince Oliver Syncfusion Team April 25, 2017 06:07 AM UTC

Hi Carsten, 
The margins, top and bottom surrounding <p> tag is inherent from the user agent stylesheet; by default, paragraph tags have a surrounding margin.  
We have a prepared a playground sample demonstrating it with RTE and Iframe, kindly refer to the following link for the sample: http://jsplayground.syncfusion.com/5fqmq04z 

CW Carsten Wuttke April 25, 2017 09:29 AM UTC

Hello Prince,

thx. Found that. Well. Had to add a CSS in the generation of the RTE. I attached a word-file and the CSS that it looks similar to Word in RTE. That file is edited in a RTE. After saving it back to drive (or downloaded...) the word looks totally different. Additional empty lines are in and line-spacing isn't correct. Can you check please if there is a workaround or so?
That problem exists if I do it with the normal RTE-example (manipulated only with p {margin:0px;) and even with the default-examples Word->HTML and HTML->Word

Attachment: wordfile_bb2d9e9.zip

PO Prince Oliver Syncfusion Team April 26, 2017 10:02 AM UTC

Hi Carsten, 

Thank you for your update. 

We checked your attachments and we tried to reproduce the issue at our end. We are unable to reproduce the issue. We have attached the sample, kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/130128/ze/rtesample-1797468928 

Please check the above sample. If the issue persists at your end, kindly modify the above sample to reproduce the reported issue or provide us an issue reproducible sample along with replication procedure. It will help us provide a solution. 


CW Carsten Wuttke April 28, 2017 09:37 AM UTC

Hello Prince,
thx for the update. But its not what I do. I load via DOCIO the word file into rte. I attached the CSS to the RTE for killing those default-margins. then I save the content of the RTE via DOCIO back to another word file. Perhaps I'd telled that I use Asp.Net WebForms...

to reproduce: I use this demo: http://asp.syncfusion.com/demos/web/richtexteditor/importexport.aspx
I manipulated it to include te.css (see attached zip)

I start with the document "start.doc" and load it into RTE. There it looks like in the picture "inrte.jpg" and when I download it it looks like in "final.doc"

Attachment: final_852a395e.zip

PO Prince Oliver Syncfusion Team May 1, 2017 04:43 AM UTC

Hi Carsten, 

Thank you for your update. 

We have used string replace to decode the encoded string returned from the document to html conversion. By default, we will replace the ‘’ character with <br> tag, so it will include a line break in RTE. If you don’t need that line break, then you can skip it by setting the replace text to empty string in the import handler [import.ashx] file. Kindly have a look at the following code snippet. 

public IDictionary<string, string> DecodeKeys() 
            IDictionary<string, string> KeyValuePair = new Dictionary<string, string>() 
               {"\"", "'"},{"\r", " "},{"", ""},{"\r", " "},{"( )+", " "},{"&nbsp;", " "},{"&bull;", "*"},{"&lsaquo;", "<"}, 
               {"&rsaquo;", ">"},{"&trade;", "(tm)"},{"&copy;", "(c)"},{"&reg;", "(r)"} 
            return KeyValuePair; 
We have prepared a sample for your reference, Refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/130128/ze/RTEImport2040431337 


Live Chat Icon For mobile
Up arrow icon