CSS Box Model
CSS
The CSS Box Model is a fundamental concept in web design that describes how the size of elements on a webpage is calculated. Every HTML element is considered as a box, and this box is made up of four layers:
Components Explained
1. Content
- This is where text, images, or other elements appear.
- You control its size using width and height.
2. Padding
- Clears space inside the border, around the content.
- Pushes the border outward.
- Example: padding: 20px;
3. Border
- A line surrounding the padding (if any) and content.
- Can be styled using border, border-width, border-style, and border-color.
- Example: border: 2px solid black;
4. Margin
- Clears space outside the border, creating space between elements.
- Example: margin: 10px;
How Element Size is Calculated (Default behavior)
- By default, the total size of an element is:
Total Width = margin + border + padding + content width
Total Height = margin + border + padding + content height
- To simplify sizing, use: box-sizing: border-box;
This makes the width and height include padding and border, making layouts easier to manage.