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?
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.
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.
Good catch. Changing it to
inline-block fixed it. No idea why I had it set to