Box Model in CSS

Every Box contains of 4 parts:

1. Content: It is actual content of element, like text or image.

• Its size is known as content width and content height.
• Browser by default calculate content height and width based on content itself but you can manipulate the the content size by CSS rule.

2. Padding: the padding extends the content size.

• Its size is known as padding box width and padding box height.

• Thickness of padding is known as padding top, padding bottom, padding left and padding right.

3. Border: The border goes around the padding and content.

• Its size is known as border box width and border box height.

• You can set different type of border. for e.g. solid, Dashed, Dotted, Double etc.

• Calculate Border box width:

• Calculate Border box height:

4. Margin: The margin extends the border area to separate the element from its neighboring elements .

• Its size is known as Margin box width and margin box height.

• CSS Rule to margin Size:

• Calculate Margin Box width:

• Calculate Margin Box height:

• CSS Shorthand properties:

Thanks:)