Some features that I would like to include in future updates of this website:
I would use the analogy of a vehicle.
HTML would represent the core components of a car - wheels, engine, doors, lights etc.
The CSS would refine the look of the car, chrome rims, bigger exhaust, leather seats, tinted windows, fluffy dice etc.
The DOM would be the interface we see/use - the gear stick, indicators, pedals, the dashboard to engage (with) with the car.
Everything visible on a webpage sits inside a box. As an example - Lego comes in a variety of block sizes - each representing different content/elements on a webpage. These can be moved around on the Lego Baseplate till we're happy with placement, styling etc. Similarly, mockups of webpages are created on a macro scale while the micro details come in towards the end.
This model references the content, it's padding, border and margin.
For a photographer capturing a portrait, his subject/content would be the person. The padding would be the amount of background captured in his composition - too much background and the subject may lose it's visual importance. The border would be the edge of said photograph. And the margin is the space, justified when juxtaposed against something else.
Understanding how to use these CSS properties ensure well spaced out elements inherent within good design.