tinymce · kemister85 · Mar 1, 2026
@@ -120,7 +120,7 @@ CSS can be specified in inline mode in the following ways:
 +
 Setting the xref:add-css-options.adoc#content_css[`content_css`] option automatically creates the `<link>` tag and puts it in the {productname} document’s `<head>`.
 +
-NOTE: This is not recommended.
+NOTE: This is not recommended. Content CSS injected via `+content_css+` applies globally in inline mode and can overflow onto the rest of the page. See xref:use-tinymce-inline.adoc#content-css-overflow-in-inline-mode[Content CSS overflow in inline mode] for details.
 
 . A CSS stylesheet specified in the `<head>` of the document with a `<link>` tag.
 +

@@ -49,3 +49,12 @@ The following demonstration is using four {productname} editors in inline mode,
 liveDemo::inline[]
 
 For information on inline mode and the `+inline+` setting, see: xref:inline-editor-options.adoc#inline[User interface options - inline].
+
+== Content CSS overflow in inline mode
+
+Inline mode is not sandboxed in an iframe. Content CSS loaded via `+content_css+` or `+content_style+` is injected into the page `+head+` and applies globally. This can cause content styles to "break out" or overflow from the editable area onto the rest of the page, affecting layout and appearance outside the editor.
+
+To avoid this:
+
+. *Preferred:* Use the `+body_class+` option and scope your content styles to that class. Add the stylesheet or `+<style>+` block directly to the page (in the `+head+` or before the editable element), and target only elements inside the editor body class.
+. *Alternative:* Do not use `+content_css+` or `+content_style+` in inline mode for content styles. Add content styles directly to the page instead. Reserve `+content_css+` and `+content_style+` for styling only the editor inline components (for example, the floating toolbar), not the editable content itself.
@@ -3,6 +3,8 @@
 
 Use the `+body_class+` option to add a class to the body of each editor instance. This class can be used to override the styles added by the `+content_css+` option. The `+body_class+` will be removed if the editor is removed and will not be included in any content retrieved from the editor.
 
+In xref:use-tinymce-inline.adoc[inline mode], `+body_class+` is the preferred way to scope content CSS. Add your content stylesheet or `+<style>+` block directly to the page and target elements inside the body class. This prevents content CSS from overflowing onto the rest of the page.
+
 *Type:* `+String+`
 
 === Example: using `+body_class+`

@@ -5,7 +5,7 @@ The `+content_css+` option loads the specified CSS files into the editable area.
 
 *Type:* `+String+`, `+Array+`
 
-NOTE: This option is intended for use with {productname}'s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant CSS stylesheets should be loaded as part of the webpage {productname} is rendered in, not using the `+content_css+` option.
+NOTE: This option is intended for use with {productname}'s classic mode, as the editable area is sandboxed within an iframe. For xref:use-tinymce-inline.adoc[inline mode], do not use `+content_css+` for content styles. Content CSS injected via `+content_css+` applies globally and can overflow onto the rest of the page. Add content styles directly to the page instead, and use `+body_class+` to scope them. Reserve `+content_css+` in inline mode only for styling editor components (for example, the floating toolbar), not the editable content.
 
 include::partial$misc/shipped-content-css.adoc[]
 

@@ -7,6 +7,8 @@ This option allows custom CSS styles to be set as a string. The styles are injec
 
 NOTE: `+content_style+` styles are not saved within {productname}'s content. If they are needed for display purposes, ensure the styles are also included in the page the content will be displayed on.
 
+NOTE: For xref:use-tinymce-inline.adoc[inline mode], do not use `+content_style+` for content styles. Styles injected via `+content_style+` apply globally and can overflow onto the rest of the page. Add content styles directly to the page instead, and use `+body_class+` to scope them. Reserve `+content_style+` in inline mode only for styling editor components, not the editable content.
+
 === Example: applying one CSS style using `+content_style+`
 
 [source,js]