New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Extra space is rendered above a paragraph in Chrome


Product RadEditor for ASP.NET AJAX


Chrome renders a big line of space above the opening paragraph by applying a margin-block-start: 1em; to it:

<div style="border: 1px solid green; width: 500px; height:500px; overflow: scroll;"  contenteditable="true">

This might be annoying to your users. You can see how to reduce the gap by overriding the margin rule and import it into the content area of RadEditor in the solution section.


The solution is to override the default para style by defining a new P CSS selector for the content area of RadEditor:

1) Create a CSS file -> EditorContentArea.css with the following content:

p {
    margin-block-start: 0em;

and load the EditorContentArea.css file in the content area via the ContentAreaCssFile property:

<telerik:RadEditor ID="RadEditor1" runat="server" ContentAreaCssFile="~/EditorContentArea.css">
In this article