Every Box contains of 4 parts:
- 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: