CSS Box Model

Content: The actual text, images, or other media within an HTML element.
Padding: The space between the content and the border.
Border: A line that surrounds the padding and content. CSS allows for specifying border properties like width, style, and color.
Margin: The space outside the border, separating the element from other elements on the page.
Box Sizing: A CSS property that defines how the width and height of an element are calculated. content-box calculates width including content only and border-box includes padding and border.
content-box: The default box sizing. The width and height properties apply only to the content area. Padding and border are added to the specified width and height.
border-box: The width and height properties include the content, padding, and border.