Figure elements that are right-aligned or left-aligned have too much margin.

Problem/Motivation

User agent stylesheets have this for the figure element:

margin-inline-start: 40px;
margin-inline-end: 40px;

This results in too much space when figure elements are right-aligned or left-aligned, especially when dealing with a text editor such as CKEditor.

See:

• https://chromium.googlesource.com/chromium/blink/+/master/Source/core/cs...
• https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
• https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css

This issue was broken out from #3078287-35: Constrain the width of aligned images, media, blockquotes etc to a max of 75%

Proposed resolution

Add this:

/**
 * Set the margin on figure element to override user agent style sheet.
 * @code
 *   margin-inline-start: 40px;
 *   margin-inline-end: 40px;
 * @endcode
 *
 * @see https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
 * @see https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
 * @see https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
 */
figure.caption {
  margin: 0 0 1.2em 1em;
}

figure.caption {
  margin: 0 1em 1.2em 0;
}

to
core/modules/filter/css/filter.caption.css

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet