4 ms·

It's because of the inconsistency. For example, `margin: auto` expands left/right margins but not top/bottom margins. ....and 50 other such cases.

bavell 3y ago
Not a CSS guru but I'm pretty sure that's because display: block (the original document layout strategy?) grows vertically, so it doesn't really make sense to have an auto value for top/bottom. And I believe margin:auto only applies when there is a width constraint in the element.
- paulddraper 3y ago
  There are Reasons(TM) for it. And yet when flexbox was created, there was no horizonal/vertical difference.
  - bavell 3y ago
    I'm not sure about that, flexbox has a major and minor axis, which you can define with flex-direction.
    - paulddraper 3y ago
      As I said, there is no inconsistent treatment of horizontal and vertical.
chrisandchris 3y ago
I never thought of that as an inconsistency, but rather of a feature. My thought is: Layout is left-to-right so why should something work top-to-bottom? Same as text-align: center will center horizontally, and (/s) vertically centering something is impossible. But I agree with the basic sentiment. The small irregular things [1] make it really weird to get, but once you'll get it, it's crazy cool. However, that does not make a language great. [1] https://stackoverflow.com/a/17468803 https://stackoverflow.com/a/17468803
- oldstrangers 3y ago
  Same sentiment here. The way margin works makes sense to my brain that lives in an HTML/CSS world.
JimDabell 3y ago
That’s not inconsistent, that’s just reflecting how our writing system works. CSS was designed around the idea that there is a document consisting of text, which implies the X and Y axes work differently – because they work differently for our writing system. Text goes from left to right, then wraps back around to the left moving vertically down (obviously this is for RTL languages; adjust for different writing systems). So this means that there’s a left and a right edge, which means that centring something horizontally makes sense – the mid-point between those edges is the centre. But it also means that there’s no real bottom imposed upon the text – the text starts at the top and just keeps flowing downward until it runs out. So centring something vertically isn’t the same sort of thing as centring something horizontally. Or to put it another way, the horizontal edges are imposed by something external to the content (often the viewport), and the bottom vertical edge is defined by the length of the content. The two axes are treated differently by CSS because they are fundamentally different. If our writing system were turned 90° on its side and we wrote downward until we reached the bottom of the page then moved back to the top and right one line, like some traditional Asian writing systems, our browsers would scroll left and right by default and you would be complaining that `margin auto` expands top/bottom margins but not left/right margins. It’s the writing system that works this way, CSS just does what is sensible for that writing system. Later on, more layout systems like grid were introduced by CSS that weren’t based upon the flow of text, but things made logical sense before then as well.
- Hammershaft 3y ago
  This doubles as a perfection explanation of why the web is such a terrible technical platform for rich client applications. All of the assumptions baked into the foundational design of HTML & CSS were based around the idea these would be used for creating lightly styled documents.
  - JimDabell 3y ago
    No, because like I said, CSS later introduced other layout systems that weren’t based upon this.
    - 3y ago

bavell 3y ago

Not a CSS guru but I'm pretty sure that's because display: block (the original document layout strategy?) grows vertically, so it doesn't really make sense to have an auto value for top/bottom. And I believe margin:auto only applies when there is a width constraint in the element.

paulddraper 3y ago
There are Reasons(TM) for it. And yet when flexbox was created, there was no horizonal/vertical difference.
- bavell 3y ago
  I'm not sure about that, flexbox has a major and minor axis, which you can define with flex-direction.
  - paulddraper 3y ago
    As I said, there is no inconsistent treatment of horizontal and vertical.

chrisandchris 3y ago

I never thought of that as an inconsistency, but rather of a feature. My thought is: Layout is left-to-right so why should something work top-to-bottom? Same as text-align: center will center horizontally, and (/s) vertically centering something is impossible. But I agree with the basic sentiment. The small irregular things [1] make it really weird to get, but once you'll get it, it's crazy cool. However, that does not make a language great. [1] https://stackoverflow.com/a/17468803 https://stackoverflow.com/a/17468803

oldstrangers 3y ago
Same sentiment here. The way margin works makes sense to my brain that lives in an HTML/CSS world.

JimDabell 3y ago

That’s not inconsistent, that’s just reflecting how our writing system works. CSS was designed around the idea that there is a document consisting of text, which implies the X and Y axes work differently – because they work differently for our writing system. Text goes from left to right, then wraps back around to the left moving vertically down (obviously this is for RTL languages; adjust for different writing systems). So this means that there’s a left and a right edge, which means that centring something horizontally makes sense – the mid-point between those edges is the centre. But it also means that there’s no real bottom imposed upon the text – the text starts at the top and just keeps flowing downward until it runs out. So centring something vertically isn’t the same sort of thing as centring something horizontally. Or to put it another way, the horizontal edges are imposed by something external to the content (often the viewport), and the bottom vertical edge is defined by the length of the content. The two axes are treated differently by CSS because they are fundamentally different. If our writing system were turned 90° on its side and we wrote downward until we reached the bottom of the page then moved back to the top and right one line, like some traditional Asian writing systems, our browsers would scroll left and right by default and you would be complaining that `margin auto` expands top/bottom margins but not left/right margins. It’s the writing system that works this way, CSS just does what is sensible for that writing system. Later on, more layout systems like grid were introduced by CSS that weren’t based upon the flow of text, but things made logical sense before then as well.

Hammershaft 3y ago
This doubles as a perfection explanation of why the web is such a terrible technical platform for rich client applications. All of the assumptions baked into the foundational design of HTML & CSS were based around the idea these would be used for creating lightly styled documents.
- JimDabell 3y ago
  No, because like I said, CSS later introduced other layout systems that weren’t based upon this.
  - 3y ago