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

Created on 4 October 2019, about 5 years ago
Updated 18 February 2023, almost 2 years ago

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:

There's too much top margin here too:

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

Feature request
Status

Needs work

Version

10.1

Component
Media 

Last updated about 14 hours ago

Created by

🇺🇸United States oknate Greater New York City Area

Live updates comments and jobs are added and updated live.
  • Needs frontend framework manager review

    Used to alert the fron-tend framework manager core committer(s) that a front-end focused issue significantly impacts (or has the potential to impact) multiple subsystems or represents a significant change or addition in architecture or public APIs, and their signoff is needed (see the governance policy for more information). If an issue significantly impacts only one subsystem, use Needs subsystem maintainer review instead, and make sure the issue component is set to the correct subsystem.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States smustgrave

    Still needs framework manager review but #17 pointed out there are some fixes still needed.

    Also is there concern for this breaking existing sites?

Production build 0.71.5 2024