What are the components of the CSS box model?

Explanation

The CSS box model consists of four areas: content (the actual content area with width and height), padding (space between content and border), border (the border surrounding padding), and margin (space outside the border). The default box-sizing is content-box, where width/height only include content. Using box-sizing: border-box includes padding and border in the width/height, making layout calculations more intuitive.