CSS Box Model

Introduction

The browser engine always renders the elements rectangular as per the CSS basics box model.
This box 🗃 consist of 4 parts content, padding, border and margin.

Content

It consists of the real content of the element i.e. text, image, video etc.
Its dimensions are content width and content height.
When the box-sizing: content-box the element is block the content area's size

can be explicitly defined with width, min-width, max-width, height, min-height, and max-height properties.

Padding

This is extended to a content box, the thickness of the padding is determined by padding-top, padding-bottom, padding-right and padding-left properties.

Border

The border extends to the padding, its dimensions are the border-box width and height.
When the border-box: box-sizing in that case, the border area size can be explicitly defined width, min-width, max-width, height, min-height and max-height properties.

Margin

The margin is extended to a border area which includes the empty area that separates from the element.
Its dimensions are width and height, the size of the margin is based on the margin-top, margin-bottom, margin-right, and margin-left.
When margin collapsing happens the margins are been shared between the boxes. Hence to overcome this use and specify the box-sizing property.

Reference Diagram

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674940439462/af2b8b1a-ce85-4652-8745-2be6e7a99fd0.png align="right")