David, Thanks for the info. I'll check that out. Steve

I have yet to find a great solution to this that also gives editors control over how much padding to give an image. Instead, I've opted for an absolute approach that adds margin to all images with a left or right alignment. This is done in two stages, one targeting the RTE itself in the backoffice and the other targets the content rendered on the front-end.

Here's my stylesheet for the backoffice RTE:

body.mce-content-body img {
    margin-bottom: 1.777em;
}

body.mce-content-body img[style*="right"] {
    margin-left: 1.5em;
}

body.mce-content-body img[style*="left"] {
    margin-right: 1.5em;
}

Then on the front-end, we have something similar albeit with a different parent selector, as body.mce-content-body is exclusive to the backoffice. The trick here is that you need to wrap the rendered content (from the RTE) in some predefined class. In the example below, I edit the /Views/Partials/Grid/Editors/Rte.cshtml partial to add a custom wrapper:

<div class="rte-wrapper">
    @Html.Raw(TemplateUtilities.ParseInternalLinks(Model.value.ToString()))
</div>

Then I add the following rules to my front-end css:

.rte-wrapper img {
    margin-bottom: 1.777em;
}

.rte-wrapper img[style*="right"] {
    margin-left: 1.5em;
}

.rte-wrapper img[style*="left"] {
    margin-right: 1.5em;
}

Again, this applies margin to ALL images in an RTE with left or right alignment and does not allow for editor adjustment. One would think that this would be trivial by allowing editors to assign a class (or format) to an image, but I have yet to be able to do that gracefully with the latest version of Umbraco.

Thanks Matt!

is working on a reply...