Hacker News new | ask | show | jobs
by HelloNurse 1630 days ago
The "block context" for which setting margins is a good layout abstraction is not the technical "block", "inline-block" etc. of CSS, but the general situation of measuring the empty space between homogeneous rectangular blocks.

If you want to place a slider between two text paragraphs, the slider isn't a good match for them (even if rectangular, it's far smaller) and you'll have to give it small or even negative margins under the assumption of the text paragraphs having normal, big enough margins.

And this highlights the issue with the idea that "children would expose their preferred margins, which these layout contexts could take or not take into account": a reusable and modular layout should be bottom-up, with components knowing what CSS rules make them look good and containers respecting them. Since the slider is small it can have smaller margins than the text paragraphs, but a container that knows that its middle child is a slider is a complicated and ad-hoc container.

1 comments

If you want to place a slider between two text paragraphs

I don’t, I want to put a slider between A and B. I don’t know what’s there from the bottom-up rule. A or B may even have a loadable content, so I know nothing until it’s rendered. If A and B are paragraphs, that’s usually a coincidence irrelevant to the container’s purpose.

So what is the correct way to put a slider between beforehand unknown type A and type B components?

a reusable and modular layout should be bottom-up, with components knowing what CSS rules make them look good and containers respecting them

This approach is good until it’s not. You can’t just write off some layouts as “bad” and call it a day. It’s not modular, it’s pre-styled in a way that involves intimate knowledge about all of components and how they “stack” in advance, which is opposite to being modular.

It seems that I am discussing graphical design while you are discussing CSS anarchism and worst-case technical details. I mentioned text paragraphs because they are the most common and traditional type of block, but images and frames are popular since at least the middle ages and they should have about the same margins as text paragraphs (solid dark objects more, transparent images with internal empty space that adds to the "official" margin less).

The components around the slider are not "unknown": it's enough to be sure that, for example, their margins are between 20 and 30 px so the slider is allowed to claim -5px off a collapsed margin without collisions.

It seems you ain’t the one who has to look for the best turpentine, well, to each their own. Thanks for the info, I hope it will help with my next layout issue!