Box Model in CSS

Rahul Kumar
3 min readApr 6, 2023

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: