CSS Margins

Margin किसी element के border के ठीक बाहर की invisible space है, जो उसे अपने पास-पड़ोस की किसी भी चीज़ से दूर धकेलती है। यह वह तरीका है जिससे आप अलग-अलग elements के बीच breathing room control करते हैं, जैसे दो cards के बीच का gap या किसी heading के ऊपर की space। आप margin को सभी चार sides पर एक साथ set कर सकते हैं, किसी एक side को individually target कर सकते हैं (margin-top, margin-right, margin-bottom, margin-left), या shorthand property इस्तेमाल करके एक ही line में कई sides set कर सकते हैं। Margin stacked elements के बीच collapse भी हो सकता है, यह एक quirk है जिसे समझना ज़रूरी है एक बार जब आप इस पर भरोसा करना शुरू करें। Consistent margins वह बड़ी वजह हैं जो cookiescursor.com जैसे किसी page को cluttered के बजाय organized महसूस कराती है।

In this page:

Margin क्या है?
सभी Sides पर Margin Set करना
Individual Margin Sides
Margin Shorthand
Margin Auto और Centering

Syntax

css

selector {
  margin: top right bottom left;
  margin-top: length;
  margin: 0 auto;
}

Margin क्या है?

Margin किसी element के border के बाहर की transparent space है। इसका कोई background या visible edge नहीं होता, यह बस पड़ोसी elements को और दूर धकेलती है। elements के बीच adjacent vertical margins एक ही margin में collapse हो सकते हैं, यह एक quirk है जो कई beginners को हैरान करती है।

Note: Margin को personal space की तरह सोचें, यह control करता है कि कोई element अपने पड़ोसियों को कितना करीब आने देता है।

Warning: Margin invisible है, इसलिए अगर spacing गलत लग रही हो, तो devtools में इसे check करना याद रखें, यह सिर्फ page देखने से नहीं दिखेगी।

उदाहरण: What Is Margin?

css

<style>
.box {
  margin: 20px;
  background: lightblue;
}
</style>
<div class="box">Box with margin</div>

सभी Sides पर Margin Set करना

margin को एक single value के साथ लिखना उस exact amount की space को element के सभी चार sides पर एक साथ लागू करता है। यह single-value shortcut सुविधाजनक है, लेकिन असली layouts को अक्सर अलग-अलग sides पर अलग spacing चाहिए होती है।

Note:

एक single-value margin बिना हर side के बारे में अलग सोचे uniform spacing जोड़ने का सबसे simple तरीका है।
Accepted values:
length — जैसे 16px, 1rem
percentage — container की width के relative
auto — browser space calculate करता है
negative length — element को बाहर की तरफ़ खींचता है
एक से चार values — top, right, bottom, left order
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: एक single margin value हर side को बराबर असर करती है, अगर आपका मतलब सिर्फ top पर space देना था, तो आपको इसके बजाय एक ज़्यादा specific property चाहिए होगी।

उदाहरण: Setting Margin on All Sides

css

<style>
.box {
  margin: 20px;
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Uniform margin on all sides</div>

Individual Margin Sides

margin-top, margin-right, margin-bottom, और margin-left आपको किसी element के सिर्फ एक side पर spacing control करने देते हैं, बाकियों से independent। ये चार properties आपको पूरा independent control देती हैं जब किसी design को asymmetric spacing चाहिए।

Note:

Individual side margins खासतौर पर उपयोगी हैं किसी heading को उसके ऊपर के content से दूर करने के लिए, बिना sides या bottom को असर किए।
Accepted values:
margin-top — ऊपर की space
margin-right — दाईं तरफ़ की space
margin-bottom — नीचे की space
margin-left — बाईं तरफ़ की space
हर एक एक length, percentage, auto या negative value लेता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: सिर्फ margin-top set करना और उम्मीद करना कि बाकी sides पर भी space होगी, beginners के लिए layout confusion का एक common कारण है।

उदाहरण: Individual Margin Sides

css

<style>
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Different margin per side</div>

Margin Shorthand

margin shorthand एक declaration में सभी चार sides set करता है, और values की संख्या तय करती है कि वे कैसे लागू होती हैं। एक value सभी चार sides set करती है। दो values पहले top और bottom, फिर left और right set करती हैं। तीन values top, फिर left और right साथ में, फिर bottom set करती हैं। चार values clockwise जाती हैं, top से शुरू होकर: top, right, bottom, left।

Margins percentages भी accept करते हैं, जैसे margin: 5%, जो parent (containing) block की width से calculate होता है, यहाँ तक कि top और bottom margins के लिए भी। सारा margin हटाने के लिए margin: 0 इस्तेमाल करें, और किसी width वाले block को center करने के लिए left और right पर auto।

Note:

Order याद रखने के लिए TRouBLe इस्तेमाल करें: top, right, bottom, left, top से शुरू होकर clockwise।
Accepted values:
length | percentage | auto — हर value (auto और negatives allowed हैं)
1 value — सभी चार sides
2 values — top/bottom, फिर left/right
3 values — top, left/right, bottom
4 values — top, right, bottom, left (clockwise)
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: आप जितनी values pass करते हैं उसे mix up करना उनका मतलब पूरी तरह बदल देता है, तीन values और चार values अलग-अलग तरीके से interpret होती हैं।

उदाहरण: Margin Shorthand

css

<style>
.wrap { border: 1px dashed #999; }
.box { background: lightblue; padding: 4px; }
.one { margin: 20px; }
.two { margin: 10px 30px; }
.three { margin: 5px 20px 15px; }
.four { margin: 5px 10px 15px 20px; }
</style>
<div class="wrap">
  <div class="box one">1 value — all sides 20px</div>
  <div class="box two">2 values — top/bottom 10px, left/right 30px</div>
  <div class="box three">3 values — top 5px, sides 20px, bottom 15px</div>
  <div class="box four">4 values — top 5px, right 10px, bottom 15px, left 20px</div>
</div>

Margin Auto और Centering

किसी defined width वाले block-level element पर left और right margin को auto set करना उसे उसके container के अंदर horizontally center कर देता है, यह एक common और reliable centering technique है।

यह technique सिर्फ उन block-level elements पर काम करती है जिनकी explicit width है, क्योंकि auto margins को distribute करने के लिए extra space चाहिए होती है।

Note:

margin: 0 auto एक classic shorthand pattern है: zero vertical margin, automatic (centering) horizontal margin।
Accepted values:
auto — free space को बाँटता है (width वाले block को center करता है)
0 auto — कोई vertical margin नहीं, horizontally centered
length — space की एक fixed amount
एक side पर auto — flex layouts में element को दूसरी तरफ़ धकेलता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: margin: auto किसी element को horizontally तभी center करता है जब उसकी explicit width हो; बिना width के, element बस पूरी available width भर देता है।

उदाहरण: Margin Auto and Centering

css

<style>
.box {
  width: 200px;
  margin: 0 auto;
  background: lightgreen;
}
</style>
<div class="box">Centered box</div>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Border Shorthand Next Lesson → CSS Margin Collapse

CSS Margins

Margin क्या है?

सभी Sides पर Margin Set करना

Individual Margin Sides

Margin Shorthand

Margin Auto और Centering

Chapter Quiz — Complete all 7 topics to unlock

Login to run this code