CSS Box Model

The CSS Box Model describes how every HTML element is treated as a rectangular box.

Components of the Box Model

The CSS Box Model has 4 main components:

• Content: The actual text, image, or other content.
• Padding: Space between the content and border.
• Border: A line surrounding the content and padding.
• Margin: Space outside the border that separates elements.

How They Affect Layout

Content, padding, border, and margin together determine the overall size and spacing of an element on a webpage.