* What is CSS Box Model?
==> The CSS box model as a whole applies to block boxes and defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model.
* Parts Of Box :
Making up a block box in CSS we have the:
- Content box: The area where your content is displayed; size it using properties like inline size and block size or width and height.
- Padding box: The padding sits around the content as white space; size it using padding and related prop.
- Border box: The border box wraps the content and any padding; size it using the border and related property.
- Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.
* The below diagram shows these layers:
