-
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.
-
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 sizecan be explicitly defined with
width
,min-width
,max-width
,height
,min-height
, andmax-height
properties.
- This is extended to a content box, the thickness of the padding is determined by
padding-top
,padding-bottom
,padding-right
andpadding-left
properties.
-
The border extends to the padding, its dimensions are the border-box
width
andheight
. -
When the
border-box: box-sizing
in that case, the border area size can be explicitly definedwidth
,min-width
,max-width
,height
,min-height
andmax-height
properties.
-
The
margin
is extended to a border area which includes the empty area that separates from the element. -
Its dimensions are
width
andheight
, the size of the margin is based on themargin-top
,margin-bottom
,margin-right
, andmargin-left
. -
When
margin collapsing
happens the margins are been shared between the boxes. Hence to overcome this use and specify the box-sizing property.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674940439462/af2b8b1a-ce85-4652-8745-2be6e7a99fd0.png align="right")