CSS Box Model

CSS Box model is a fundamental concept in web Design and layout.
This describes how elements on a webpage are structured and how their dimensions are calculated.
It consists of several layers or "boxes" that wrap around an HTML element, determining its layout and spacing.

Content:

This is the innermost layer.
It represents the actual content of the HTML element, such as text, images.
The content dimensions are set by the width and height properties in CSS.

Padding:

The padding is the space between the content area and the element's border.
It can be set individually for each side (top, right, bottom, left).
Padding adds spacing within the element.

Border:

The border provides a visible boundary for the element. and it surrounds the padding and content area.
It is controlled by the border property, which includes properties like border-width, border-style, and border-color.

Margin:

The margin is the space between the element's border and neighbouring elements.
It controls the spacing between elements on a webpage.
The margin property is used to set margins for each side (top, right, bottom, left) individually.