What is the difference between content-box and border-box in CSS?

Explanation

With box-sizing: content-box (default), the width and height properties only include the content area; padding and border are added on top, making the element larger than specified. With box-sizing: border-box, width and height include content, padding, and border, so the element is exactly the specified size. border-box simplifies layout calculations and is recommended globally via * { box-sizing: border-box; }. Margin is always outside the specified dimensions in both models.