4 ms·

Why don’t top and bottom `auto` margins center things?

wryoak 2y ago
Doesn’t seem like that would play nice with margin collapsing, like what if you had two box elements with that style that would otherwise undergo margin collapsing, how should they render? What’s the baseline margin to combine if they should collapse and what’s the baseline margin to separate them if they shouldn’t?
- 9dev 2y ago
  Just let me opt out of margin collapsing. That may be helpful if we’re dealing with paragraphs on a long piece of prose, but that’s decidedly not what I’m dealing with 95% of the time. Even with all the cool layout props we have today, it’s way too complicated to say „make this thing fill the whole screen minus the navbar at the top, make it scrollable if the content overflows and Center it vertically otherwise“. Add a grid or sticky elements or z index modifications to the mix, and the quirks get loud fast.
  - wryoak 2y ago
    You can use flex or grid to opt out of margin collapsing and get your easy center alignments and justifications. You’re right that it’s super hard to accomplish that but you have to remember it’s also hard to accomplish that in real life if you’re mathing it out. It’s easy to look at something and put something in its center (probably not accurately but convincingly enough) but to automate it is a different case, especially when the DSL for doing so 1) must handle so many other structuring features, as you noted, 2) was originally designed for structuring text documents rather than applications, as you noted, and 3) must maintain backwards compatibility so as not to break the internet. It’s frustrating, it is. I’m not trying to say “margin collapsing takes precedence over your minute concerns!” I’m just suggesting one reason (of perhaps many reasons) why margin: auto isn’t an effective approach.
- ffsm8 2y ago
  Why would that be an issue? Isn't it fundamentally the same as with the horizontal centering via margin: auto for inline-blocks?
  - wryoak 2y ago
    Margins are only collapsed in the vertical direction
JimDabell 2y ago
Because our writing system is unidirectional. Documents have a direction that they flow in (typically vertical), and text within those documents is written along the other axis (typically horizontal) and wraps when it hits the edge. So in a viewport, a document has three fixed edges defined by the viewport dimensions (typically top, left, and right), with the other edge (bottom) defined by the size of the content. So the horizontal axis works in a very different way to the vertical axis.
- deleted 2y ago
  [deleted]
- happytoexplain 2y ago
  Then why is 'auto' a valid value for the bottom margin?

Doesn’t seem like that would play nice with margin collapsing, like what if you had two box elements with that style that would otherwise undergo margin collapsing, how should they render? What’s the baseline margin to combine if they should collapse and what’s the baseline margin to separate them if they shouldn’t?

9dev 2y ago
Just let me opt out of margin collapsing. That may be helpful if we’re dealing with paragraphs on a long piece of prose, but that’s decidedly not what I’m dealing with 95% of the time. Even with all the cool layout props we have today, it’s way too complicated to say „make this thing fill the whole screen minus the navbar at the top, make it scrollable if the content overflows and Center it vertically otherwise“. Add a grid or sticky elements or z index modifications to the mix, and the quirks get loud fast.
- wryoak 2y ago
  You can use flex or grid to opt out of margin collapsing and get your easy center alignments and justifications. You’re right that it’s super hard to accomplish that but you have to remember it’s also hard to accomplish that in real life if you’re mathing it out. It’s easy to look at something and put something in its center (probably not accurately but convincingly enough) but to automate it is a different case, especially when the DSL for doing so 1) must handle so many other structuring features, as you noted, 2) was originally designed for structuring text documents rather than applications, as you noted, and 3) must maintain backwards compatibility so as not to break the internet. It’s frustrating, it is. I’m not trying to say “margin collapsing takes precedence over your minute concerns!” I’m just suggesting one reason (of perhaps many reasons) why margin: auto isn’t an effective approach.
ffsm8 2y ago
Why would that be an issue? Isn't it fundamentally the same as with the horizontal centering via margin: auto for inline-blocks?
- wryoak 2y ago
  Margins are only collapsed in the vertical direction

JimDabell 2y ago

Because our writing system is unidirectional. Documents have a direction that they flow in (typically vertical), and text within those documents is written along the other axis (typically horizontal) and wraps when it hits the edge. So in a viewport, a document has three fixed edges defined by the viewport dimensions (typically top, left, and right), with the other edge (bottom) defined by the size of the content. So the horizontal axis works in a very different way to the vertical axis.

deleted 2y ago
[deleted]
happytoexplain 2y ago
Then why is 'auto' a valid value for the bottom margin?