Learning the order of padding/border/margin and how they interact with each other and width/height was the tipping point for me. There used to be a good article

Learning the order of padding/border/margin and how they interact with each other and width/height was the tipping point for me. There used to be a good article on mdn for it, but their introductory page now looks like a bad replacement to me: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_mod... If nothing else, the image at the top is more confusing than it needs to be, the old one was much better. It didn't used to refer to edges, but the margin/border/etc itself, which is what you're actually dealing with in CSS. The box model combined with the box-sizing page makes probably the biggest WTF people have with CSS pretty obvious IMO (why "width: 100%" is bigger than 100%): https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing If the reason for that makes sense to you, I think that makes you well above average among frontend devs. All the new stuff like flex and grid is still built on the box model after all.