Hacker News Reader

Comment by koromak | Hacker News Reader

One of those things I've just been subconsciously dealing with for years without ever deciding to actually learn the rules.

"Damn it collapsed. Okay padding then"

View on HN

The behavior is very obvious if you use them for text. (I have had a few cases of naively stating my margins, the browser exactly displaying what I meant, instead of what I thought I have said, and needing to understand why it worked.)

Just don't use margins for layout, I guess.

It actually makes sense for laying out UI elements. Unfortunately there is no horizontal collapse.

Just in case, in my Sciter horizontal margins do collapse in horizontal flows:

   container {
     flow: horizontal; /* single row */
   }

   container > child {
     margin:1em; /* will collapse */
   }

See: https://docs.sciter.com/docs/CSS/flows-and-flexes#flowhorizo...

Same, though for me it's probably more like:

"Add margin. More margin. Moooore margin!! Oh wait.."

A lot of CSS works this way, until the fateful day you have to fix something and finally spend a day investigating how exactly it works.

"IDK man, I just always use flexbox"

Flexbox and grids are the modern saviors of CSS. If only we had started with them.

I put everything in tables.

I just space everything out with  

There's someone on HN with a blog where everything is split into Spans that then have widths set by JavaScript to precisely lay everything out with pixel precision.

I was both impressed and appalled to see it.

This was the way.

Looks close enough to the design, ship it.

Reply on news.ycombinator.com