What is the CSS box model and what are its four components?

Think of every HTML element as a gift box: the gift itself is the content, the tissue paper wrapping it is the padding, the cardboard box walls are the border, and the gap between this box and the next one on the shelf is the margin. The total space the box takes up depends on all four layers added together — unless you use border-box sizing, which promises a fixed outer box size no matter how thick the walls or padding are.