How to apply padding to TinyMCE editor?

I am using the following in functions.php...

function wpdocs_theme_add_editor_styles() {
    add_editor_style( array(
        'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
        'assets/css/editor.css'
    ) );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

... to apply the Bootstrap CSS to my WordPress post editor.

Bootstrap comes in nicely. But this now results in the removal of any padding from the post editor.

File editor.css contains padding: 40px !important; in turn applied to a range of CSS classes... the padding is not getting applied...

.mce-panel,
.mce-edit-area,
.mce-container,
.mce-panel,
.mce-stack-layout-item,
.wp-editor-container .wp-editor-area,
.wp-editor-container,
.wp-editor-area {
  padding: 40px !important;
}

I cannot figure out which is the pertinent class / why the padding is not getting applied. In dev tools, the editor.css file is getting inserted, but the style rule is now showing as processed on the right-hand side.

How can I ensure some padding?

Topic add-editor-style tinymce wysiwyg Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.