Better indentation for blockquote, dl, ul, ol, figure, menu, dir, etc

[tigt]

I can’t find if a spec recommends this, but modern browsers add margin: 1em 40px to <figure>, such as this declaration from Firefox’s html.css UA stylesheet (resource://gre-resources/html.css):

blockquote, figure {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

The 1em is reasonable and matches <p>, but giving up 80 pixels out of 320 on most phones seems like a lot — 25%!

The unit mismatch also bothers me, but I’m not sure that’s an actual problem.

[frivoal]

Tempted to agree, but one thing to consider: 40px is used on a number of things, in particular the inline-start padding of ul, ol, menu, dir, and margin of dd. Maybe there's some merit to keeping these things in sync.

[meyerweb]

Me, I’d love to see a global find-and-replace of s/40px/2.5em/ (or 2.5rem, if we absolutely must). “Because that’s what Mosaic did” is exactly the kind of reasoning I believe cssremedy is trying to leave behind.

[frivoal]

I'd go with ems, not rems. List markers and their spacing scale with the font size, so 40px fails at large sizes, and rems would as well.

I don't know whether it's important to keep figures and list in sync. it might be. But @tigt 's point about limited space on mobile is valid too.

[jensimmons]

“Because that’s what Mosaic did” is exactly the kind of reasoning CSS Remedy is trying to leave behind.

EXAAAACCTLY. I love that quote. I think I'll add it to the README.

[skorasaurus]

Related to #3 (discussing which browsers & versions does cssremedy support):

margin-block-start, margin-block-end, margin-inline-start, and margin-inline-end are not supported in IE and the non-Chromium based versions of Edge. (I've only verified this in IE 11).

[mirisuzanne]

I think this is a reasonable enhancement for modern browsers, using the same logical-properties that they apply in the user-agent styles, without much effort also "fixing" legacy browsers.

The most direct replacement probably looks like:

blockquote, figure {
  margin-inline-start: 2.5em;
  margin-inline-end: 2.5em;
}
ul, ol, menu, dir {
  padding-inline-start: 2.5em;
}
dd {
  margin-inline-start: 2.5em;
}

I'm going to start there, but I agree we could consider something smaller. Not sure what that value would be…

[mirisuzanne]

Having opened a PR, I wonder if moving to em makes it more likely to cause spacing issues if we don't lower the value. That 2.5em (times two) could easily become a lot more than 80px if the user has a larger default font size.

[jssteinberg]

I don't get indenting figure in default CSS. Is there some visual/semantic meaning? Could a CSS Remedy remove inline margins (wouldn't that be more intuitive for developers and content creators)?