Genuinely, though, CSS is fairly clear cut about the rules of positioning and space. Relative positioning is one of the most important concepts to master since it allows things to flow via the HTML structure and not extra CSS. Fixed positioning is as if you had no relative container other than the window itself. Absolute positioning is a little weird, but it’s just like fixed positioning except within the nearest parent with relative positioning.

Everything else is incredibly straight forward. Padding adds space within a container. Margins add space outside a container. Color changes text color. Background-color changes the background color of an element.

Top, left, right, and bottom dictate where the element should be positioned after the default rules are applied. So if you have a relative div inside a parent which is half way down the page, top/right/left/bottom would move the element relative to it’s position within the parent. If you made the div fixed, it would be moved relative to the window.

Lastly, if you’re designing a webpage just think in boxes or rows and columns. HTML can define 75% of the webpage structure. Then with just a bit of CSS you can organize the content into rows/columns. That’s pretty much it. Most web pages boil down to simple boxes within boxes. It just requires reading and understanding but most people don’t want to do that to use CSS since it feels like it should just “know”.

As someone who has built QT, Swing, and JavaFx applications, I way prefer the separation of concerns that is afforded us via HTML JS and CSS.