📘 Lesson · Lesson 17

Padding

padding — Space Inside the Element

.box {
    padding: 20px;    /* 20px space INSIDE, between content and border */
    border: 1px solid navy;
}

This content has 20px of padding — notice the space between the text and the border on all sides.

Padding is the layer just inside the border — space between the element's content and its edge. Unlike margin (which pushes OTHER elements away), padding creates room WITHIN the element, around its content. If the element has a background colour or border, padding is visibly filled by that background — because padding is inside the box.

padding vs margin — the crucial difference

┌─ MARGIN (outside - pushes neighbours away) ─┐
│  ┌─ BORDER ─────────────────────────────┐   │
│  │  ┌─ PADDING (inside - around content) │   │
│  │  │      CONTENT                       │   │
│  │  └───────────────────────────────────┘   │
│  └──────────────────────────────────────┘   │
└──────────────────────────────────────────────┘

	padding	margin
Where	Inside the border	Outside the border
Purpose	Space around content	Space between elements
Background	Filled by background	Always transparent
Clicks	Part of the element (clickable)	Not part of the element

The one-line distinction to memorise: "padding is inside, margin is outside." Padding pushes the border away from the content (making the element bigger inside); margin pushes other elements away (creating gaps between elements). A button's padding makes it bigger and more clickable; its margin creates space between it and the next button. This is the single most tested CSS box-model question.

Sides and Shorthand — same system as margin

padding-top: 10px;
padding-right: 20px;         /* or set each side */

padding: 20px;               /* all sides */
padding: 10px 20px;          /* top/bottom | left/right */
padding: 10px 20px 30px 40px; /* top right bottom left (clockwise) */

Padding uses the EXACT same system as margin: individual sides (padding-top etc.), or the clockwise shorthand (Top-Right-Bottom-Left, remember "TRouBLe"). One value = all sides; two values = vertical then horizontal; four = each side. Since you learned this for margin, padding is instantly familiar — the same rules, just applied inside instead of outside.

Real-World Uses — where padding shines

Buttons: padding: 12px 24px makes a button comfortably sized and clickable — text alone is too cramped to click.
Cards and boxes: padding keeps content from touching the box edges, giving that clean, breathable look.
Table cells: padding on th/td (from the tables chapter) stops data from cramming against the borders.
Sections: generous padding creates the spacious feel of professional websites.

Notice the pattern: padding is what makes elements feel comfortable and clickable. A button with no padding is a tiny, hard-to-tap target; add padding and it becomes a proper button. Nearly every nice-looking UI element owes its comfort to well-chosen padding.

Padding and Size — the box model reminder

.box {
    width: 200px;
    padding: 20px;    /* adds 20+20 = 40px to the total width! */
}
/* Actual on-screen width = 200 + 40 = 240px (by default) */

Recall from the box model chapter: by default, padding ADDS to an element's total size — a 200px-wide box with 20px padding is really 240px wide on screen. This catches people out when building layouts. The fix, box-sizing: border-box (its own chapter, coming next), makes padding fit INSIDE the declared width instead. For now, remember padding adds to size by default — plan your widths accordingly.

Exam Corner

Q: What is padding? Space inside the border, between the content and the edge of the element.

Q: Key difference between padding and margin? Padding is inside (around content); margin is outside (between elements).

Q: Is padding filled by the element's background? Yes — padding is inside the box, so the background shows through it.

Q: What does padding: 10px 20px mean? Top & bottom 10px, left & right 20px.

Q: Does padding add to an element's width by default? Yes — unless box-sizing: border-box is set.

padding — Element के अंदर की Space

.box {
    padding: 20px;    /* content aur border ke beech ANDAR 20px space */
    border: 1px solid navy;
}

Is content ka 20px padding hai — text aur border ke beech charon taraf space dekhiye.

Padding border के ठीक अंदर वाली layer है — element के content और उसके किनारे के बीच space. Margin (जो DUSRE elements को दूर धकेलता है) के उलट, padding element के ANDAR, उसके content के चारों ओर जगह बनाता है. अगर element का background colour या border हो, padding उस background से दिखाई देते हुए भरता है — क्योंकि padding box के अंदर है.

padding vs margin — अहम फर्क

┌─ MARGIN (bahar - padosiyon ko door dhakelta) ┐
│  ┌─ BORDER ─────────────────────────────┐   │
│  │  ┌─ PADDING (andar - content ke charon or)│
│  │  │      CONTENT                       │   │
│  │  └───────────────────────────────────┘   │
│  └──────────────────────────────────────┘   │
└──────────────────────────────────────────────┘

	padding	margin
कहां	Border के अंदर	Border के बाहर
मकसद	Content के चारों ओर space	Elements के बीच space
Background	Background से भरा	हमेशा transparent
Clicks	Element का हिस्सा (clickable)	Element का हिस्सा नहीं

याद रखने लायक one-line फर्क: "padding अंदर, margin बाहर." Padding border को content से दूर धकेलता है (element को अंदर से बड़ा बनाते); margin दूसरे elements को दूर धकेलता है (elements के बीच gaps बनाते). Button का padding उसे बड़ा और ज़्यादा clickable बनाता है; उसका margin उसके और अगले button के बीच space बनाता है. यह सबसे ज़्यादा test होने वाला CSS box-model सवाल है.

Sides और Shorthand — margin जैसा ही system

padding-top: 10px;
padding-right: 20px;         /* ya har side set karo */

padding: 20px;               /* saare sides */
padding: 10px 20px;          /* top/bottom | left/right */
padding: 10px 20px 30px 40px; /* top right bottom left (clockwise) */

Padding margin जैसा EXACT same system use करता है: individual sides (padding-top आदि), या clockwise shorthand (Top-Right-Bottom-Left, "TRouBLe" याद रखिए). एक value = सारे sides; दो values = vertical फिर horizontal; चार = हर side. यह आपने margin के लिए सीखा, इसलिए padding तुरंत परिचित — वही rules, बस अंदर की बजाय... अंदर लगे.

असली इस्तेमाल — जहां padding चमकता है

Buttons: padding: 12px 24px button को आरामदायक size और clickable बनाता है — सिर्फ text click करने को बहुत तंग.
Cards और boxes: padding content को box के किनारों से छूने से रोकता है, वही साफ, breathable look देता है.
Table cells: th/td पर padding (tables chapter से) data को borders से चिपकने से रोकता है.
Sections: उदार padding professional websites का विशाल feel बनाता है.

Pattern देखिए: padding ही elements को आरामदायक और clickable बनाता है. बिना padding button नन्हा, मुश्किल-से-tap target है; padding जोड़िए और वह proper button बन जाता है. लगभग हर सुंदर UI element अपनी comfort अच्छे चुने padding को देता है.

Padding और Size — box model reminder

.box {
    width: 200px;
    padding: 20px;    /* total width me 20+20 = 40px jodta hai! */
}
/* Asli screen width = 200 + 40 = 240px (default) */

Box model chapter से याद कीजिए: default रूप से padding element के total size में JODTA है — 20px padding वाला 200px-चौड़ा box असल में screen पर 240px चौड़ा है. यह layouts बनाते समय लोगों को पकड़ता है. Fix, box-sizing: border-box (अपना chapter, अगला), padding को declared width के ANDAR fit कराता है. अभी याद रखिए padding default रूप से size में जुड़ता है — अपनी widths उसी अनुसार plan कीजिए.

Exam Corner

Q: Padding क्या है? Border के अंदर space, content और element के किनारे के बीच.

Q: Padding और margin में मुख्य फर्क? Padding अंदर (content के चारों ओर); margin बाहर (elements के बीच).

Q: क्या padding element के background से भरा होता है? हां — padding box के अंदर है, तो background उसमें से दिखता है.

Q: padding: 10px 20px का क्या मतलब? Top और bottom 10px, left और right 20px.

Q: क्या padding default रूप से element की width में जुड़ता है? हां — जब तक box-sizing: border-box set न हो.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.