Traditional box model
An understanding of the box model is the foundation of CSS theories. You have to know the impact of width, height, margin, and borders on the size of the box and how you can manage it to match the elements on a website. The main questions for coders and frontend developers in interviews are based on box model theories. Let's begin this important chapter, which will be the foundation for every upcoming subject.
Padding/margin/border/width/height
The ingredients of the final width and height of the box are as follows:
- Width
- Height
- Margins
- Paddings
- Borders
For better understanding of the box model, the following is an image from Google Chrome inspector:
For more clarity and better understanding of the box model, let's analyze the following image:
In the preceding image, you can see that in the box model, we have the following four edges:
- Content edge
- Padding edge
- Border edge
- Margin edge
The width and height of the box are based on the following:
- Width/height of content
- Padding...
