How to change margins, line height, and paragraph spacing

Changing margins, line height, and spacing in TinyMCE

August 24th, 2020

2 min read

Six lines with arrows pointing between them highlighting the spacing.

Although the default margins, line height, and paragraph spacing used in TinyMCE are fine for most use cases, we are occasionally asked questions around how to customize the default margins, padding, line height, and line spacing.

First, though, let’s talk about how to customize the CSS used by TinyMCE.

CSS customization

TinyMCE is shipped with a default CSS that determines what the font and everything else looks like in the editable area itself. If you want to change the default CSS in the editor, you can initialize TinyMCE with the content_css option to load a specific stylesheet.

For example:

tinymce.init({
  /* ... */
  content_css: "/mycontent.css",
});

Additionally, content_style can be used to tweak (or override) parts of the CSS (whether that be the default CSS or styles you’ve specified with content_css).

For example:

tinymce.init({
  /* ... */
  content_style: "body { color: red; }",
});

Either way, remember these styles are for the content as it appears in the editor only. You’ll also need to consider how the content is styled on your published site or application. It can be a good idea to base the editor CSS on your site/app CSS for the full WYSIWYG experience.

Change margins

Add a margin

By default, TinyMCE has a margin of 1rem. However, this won’t suit all use cases. For example, if you’re building a document editor, you might like wider margins, and potentially a different color that helps to frame the page.

There are already two style sheets available out-of-the-box that provide larger margins - document and writer. writer provides wider margins on the left and right sides of the editable area, whereas document applies wider margins to the top and bottom as well and frames the page on a grey canvas providing an experience more like what we’re used to in applications like Word and Google Docs.

You can apply them with content_css; for example:

tinymce.init({
  /* ... */
  content_css: "document",
});

Alternatively, you can adjust the margins yourself by modifying the TinyMCE CSS. For example, you could set the width of the editable area and allow the margins to adjust automatically:

tinymce.init({
  /* ... */
  content_style: "body { margin: 1rem auto; max-width: 900px; }",
});

Remove a margin

Similarly, if you want to remove the default margin altogether, so the text starts right at the edge of the editor area, you can set it to zero:

tinymce.init({
  /* ... */
  content_style: "body { margin: 0; }",
});

Change line height

By default, the line height is set to 1.4. You can override the line height by setting it to 1 for single or 2 for double and so on:

tinymce.init({
  /* ... */
  content_style: "body { line-height: 1; }",
});

Change paragraph spacing

Paragraphs default to whatever the browser uses; for example, in some cases it’s set to 16px.

You can remove any default paragraph spacing by setting it to zero:

tinymce.init({
  /* ... */
  content_style: "p { margin: 0; }",
});

Or, if you want to enforce a specific spacing, say, before paragraphs, you can set them accordingly; for example:

tinymce.init({
  /* ... */
  content_style: "p { margin: 16px 0; }",
});

What next?

You might also be interested in more information about:

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get a free API Key and try it out (you’ll also get a 14-day trial of our premium plugins!)