Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Six lines with arrows pointing between them highlighting the spacing.

Adjusting margins, line height, and spacing in TinyMCE

Ben Long

August 24th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

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.

Working with CSS in TinyMCE

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.

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; }"
});

Adjust 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; }"
});

Adjust 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 30-day trial of our premium plugins!)

ConfigurationDesign
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • A crystal ball on top of illuminated squares.
    How-tos & Tutorials

    TinyMCE CSS and custom styles

    by Ben Long in How-tos & Tutorials
  • Text that reads "<!DOCTYPE HTML>".
    How-tos & Tutorials

    TinyMCE requires standards mode

    by Ben Long in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor