🤔 What is Box Model anyway?

Box Model is a way in which the browser represents and calculates each element on the page. Any HTML element, whether <div>, <p>, <button>, the browser perceives as rectangular box.

And this box has a structure:

• Content — content (text, picture, etc.)

• Padding — internal indentation from the content to the frame

• Border — frame around the element

• Margin - external indentation to adjacent elements

🔍 Why is this important?

You can know HTML and CSS perfectly, but if you don't understand, how block sizes are calculated, then you will constantly ask yourself questions like:

• "Why does the block go beyond the parent?"

• "Why doesn't margin work as I expected?"

• "Why did two blocks merge into one?"

And the answer is almost always in the box model.

📏 Size calculation formula

Example:

width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;

If used box-sizing: content-box:

Total width = 200 + 10 + 10 + 2 + 2 = 224px

If used box-sizing: border-box:

Width includes padding and border → content = 176px

🧠 How does the browser draw a block?

1. Parsing HTML

2. Applies CSS

3. Creates a rendering tree

4. Calculates the size of all elements through Box Model

5. Draws everything on the screen

🚫 Common mistakes and myths

🔹 Margin collapse

Vertical indents of adjacent blocks do not add up, but merge — the larger one remains.

🔹 Elements go beyond the container

If width: 100% is set and padding is added, the block may pop up. Solution: box-sizing: border-box.

🔹 Border affects the size

Even a 1px frame changes size. Use box-sizing or outline for hover.

🎨 How to see it in the browser?

1. Open DevTools (F12)

2. Highlight item

3. In the Computed tab - Box Model visualization

🧪 Practical tips

• Add globally: * { box-sizing: border-box; }

• Keep track of margins in grid/flex containers

• Instead of border, you can use outline for focus

💻 Why is this important to you, the developer?

Box Model is control over the layout. You don't just set the width and height, you control the behavior of the interface. Pixel-perfect starts with a box model.

📱 Do you want to understand the frontend in more detail?

Download Code — an application with step-by-step courses on the frontend, where everything is explained in Russian and in simple words. Learn, practice, and code with confidence.

🎯 Conclusion

Box Model is the foundation. Once you master it, the layout will become stable. If you don't master it, you will struggle with indents all your life.

👇 Do you use box-sizing: border-box by default? Write in the comments how you first encountered the box model — and how much fell into place!