How to stop margins from randomly failing to work?

It’s the most frustrating part of CSS. I realize it isn’t actually random, but it feels like it is. Sometimes top and bottom margins seem to just be ignored. This isn’t specific to Codecademy or any specific exercise. I assume it’s a collapsing margin issue, or an overflow issue? The div that holds the score row isn’t growing with the content? Isn’t it supposed to do that on it’s own?

image

Here’s the CodePen. Technically this is a JavaScript project, but JavaScript isn’t the issue, and this isn’t the only css I’ve had this frustration with.

I share your frustration with this aspect of CSS. I’ve read entire articles dedicated to floats collapsing, hacky workarounds for various implementations that are slightly different, and quirky behaviors. Even searching for terms related to these will bring back articles from 12 years ago that still get comments.

At first I thought it might be a float clearing issue here, but it looks like it could be related to the score-num class having a display set to inline. Might even be a combo of things. Here’s what happens when the display and margins are adjusted.

css-annoying

To get it back close to the original spot, I set the margin to 0px, but if we set it to -10px, then it ends up having another issue again, which may actually be expected behavior in that case from what I’ve read.

3 Likes

Good catch. Changing it to inline-block fixed it. No idea why I had it set to inline