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