📦 CSS Box Model

Every Element is a Box

Every HTML element is a rectangular box with four layers from inside to outside:

1. Content — where text and child elements live
2. Padding — transparent space between content and border
3. Border — the visible outline (width, style, color)
4. Margin — transparent space outside the border, separating it from other elements

box-sizing: border-box

By default, width: 300px sets the content width. Adding padding and border makes the actual element wider — confusing and error-prone.

Fix this by setting box-sizing: border-box globally. Now width: 300px includes padding and border — the total element is exactly 300px wide. This is standard in all modern professional CSS.

*, *::before, *::after { box-sizing: border-box; }

Display Property

• display: block — takes full width, starts on new line (div, p, h1)
• display: inline — flows with text, ignores width/height (span, a)
• display: inline-block — flows with text but accepts width/height
• display: none — hides the element completely (no space reserved)