Modern CSS
Logical Properties
margin-inline, padding-block
💡 Traditional properties (margin-left, margin-right) "physical" directions hain — jaise "map par North/South" bolna. Logical properties (margin-inline-start) "relative" directions hain — jaise "aage/peeche" bolna, jo language/writing-direction ke hisaab se automatically adjust ho jaata hai.
Logical properties (margin-inline, padding-block, inset-inline-start) writing-mode-aware hain — LTR (left-to-right, English/Hindi) languages mein "inline-start" left hai, lekin RTL (right-to-left, Arabic/Hebrew) languages mein automatically right ban jaata hai. Multi-language/internationalized websites ke liye bahut important.
/* Traditional (physical, hard-coded direction): */
.old-style {
margin-left: 20px;
margin-right: 10px;
}
/* Logical (adapts automatically to writing direction): */
.modern-style {
margin-inline-start: 20px; /* LTR: left, RTL: right — automatic! */
margin-inline-end: 10px;
}
.card {
padding-block: 16px; /* top aur bottom (block direction) */
padding-inline: 24px; /* left aur right (inline direction), LTR/RTL-aware */
}↔️
Traditional properties (margin-left, margin-right) "physical" directions hain — jaise "map par North/South" bolna. Logical properties (margin-inline-start) "relative" directions hain — jaise "aage/peeche" bolna, jo language/writing-direction ke hisaab se automatically adjust ho jaata hai.
1 / 2
⚡ झट से Recap
- margin-inline/padding-block = writing-direction-aware spacing
- RTL languages (Arabic, Hebrew) ke liye automatically adapt hote hain
- International/multi-language sites ke liye modern best practice
इस page में (2 subtopics)
inset property top/right/bottom/left (ya unke logical equivalents) ka shorthand hai — position: absolute elements ko poori tarah position karne ke liye concise syntax.
.overlay {
position: absolute;
inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; ka shorthand */
}
.positioned {
position: absolute;
inset-block-start: 10px; /* logical "top" */
inset-inline-end: 20px; /* logical "right" (LTR mein) */
}Tip: inset: 0; ek bahut common pattern hai ek element ko apne positioned parent ko poora "cover" karne ke liye (jaise modal overlays, loading spinners) — 4 properties ki jagah ek line.
Logical properties (2024+) widely supported hain modern browsers mein — production use ke liye safe hain, lekin agar bahut purane browsers (jaise IE11) support karna zaroori ho, traditional physical properties fallback ke roop mein zaroori ho sakte hain.
/* Fallback pattern (rarely zaroori aajkal): */
.element {
margin-left: 20px; /* fallback purane browsers ke liye */
margin-inline-start: 20px; /* modern browsers override karenge */
}Tip: Aaj (2026) ke context mein, almost saare production websites logical properties safely use kar sakti hain bina fallback concern ke — browser support ab non-issue hai zyadatar audiences ke liye.