CSS Box Model

The CSS box model treats every element as a box with four layers from inside out: content, padding, border and margin. The sum of these layers decides how much space the element takes up on the page.

Why it matters

Almost every layout bug, such as a column that overflows its container or an unexpected gap, comes from misunderstanding the box model. The box-sizing property decides whether width includes padding and border. With the default content-box, adding padding makes the element wider than declared.

Example

.card { width: 300px; padding: 20px; border: 2px solid #ccc; }

With content-box the card occupies 300 + 40 + 4 = 344px. With box-sizing: border-box it occupies exactly 300px and the content area shrinks to 256px.

Common mistakes

• Not setting box-sizing: border-box globally, then wondering why two 50% wide columns wrap.
• Forgetting that vertical margins between block elements can collapse into one.
• Using margin for spacing inside a component where padding or gap is clearer.

Related

• CSS Selector
• Flexbox
• CSS Grid
• Media Query
• टूल: Developer tools

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.