Google search engine

margin padding क्या है – margin and padding in CSS

क्या आप जानते है margin और padding क्या है जब हम किसी website में box, text तथा image को देखते है तो हमें box, text, image आदि चीजों के ऊपर, नीचे, दाए तथा बाए कुछ space यानि की खाली जगह दिखाई देती है जिसे हम CSS में margin और padding कहते है.

एक website के अंदर हम कहीं पर भी और कितनी भी बार margin, padding का इस्तेमाल कर सकते हैं margin और padding का इस्तेमाल दो element के बीच में space देने के लिए करते हैं हम website में अलग-अलग तरीकों से margin और padding दे सकते है.

CSS में margin और padding क्या
CSS में margin और padding क्या है

Margin और Padding में क्या अंतर है – difference between margin and padding in css

जब हम HTML और CSS के द्वारा कोई box बनाते हैं जिसमें हम background color और border देते हैं. box के चारों तरफ हमें border के बाहर से space यानि कि खाली जगह देने के लिए margin का इस्तेमाल करते हैं जिसे margin कहा जाता है. अगर हमें box के अंदर यानि border के अंदर कि तरफ space देना है

तो हम Padding का इस्तेमाल करते हैं जिसे Padding कहा जाता हैं HTML और CSS द्वारा margin और Padding का इस्तेमाल करने के लिए html में box class बनाकर css में box की width, height, background-color और border देते हैं

तथा उसके साथ हम margin और padding का इस्तेमाल करते है box के अलावा हम text, button, image आदि element में margin और padding का इस्तेमाल कर सकते हैं.

CSS margin property क्या है और उसका इस्तेमाल

अगर हमे किसी box, text, image या किसी element में केवल ऊपर, नीचे, दाए तथा बाए से space देना हो तो हम CSS margin property का इस्तेमाल करते हैं CSS margin property को हम pixel तथा precentage में दे सकते है. अगर हम अपने website पर किसी element में margin देते है.

तो उसे देखने के लिए अपनी website को web browser पर open कर right click कर inspect element कर देख सकते है. जिसमें हमें margin orange color में दिखाई देता है css से हम margin को बहुत तरीकों से दे सकते हैं.

CSS margin top

अगर हमें box में केवल ऊपर से space देना है तो हम margin top property का इस्तेमाल करते हैं जिसमें हमारा box ऊपर से नीचे की तरफ खिसक जाता हैं.

CSS margin bottom

अगर हम box में margin bottom देते हैं तो box के नीचे की side space आ जाता हैं जिसमे box के नीचे का element नीचे खिसक जाता है लेकिन box पर कोई फर्क नहीं पड़ता है.

CSS margin left

अगर हमें box के left side से space चाहिए तो हम margin left का इस्तेमाल करते हैं जिसमें box बाए से दाए side की तरफ खिसक जाता हैं.

CSS margin right

हमें अगर box के right side से space चाहिए तो हम margin right का इस्तेमाल करते हैं जिसमें box दाए से बाए side की तरफ खिसक जाता हैं.

CSS margin 0 auto

हम अगर कोई box बनाते हैं तो वह हमेशा left side से शुरू होता है अगर हमें box left से right की दिशा में center में चाहिए तो हम css में margin 0 auto का इस्तेमाल करते है जिसमें हमारा box center में आ जाता है box के अलावा हम image text button तथा किसी भी element को center में रख सकते हैं अगर हमें box में किसी भी side से margin हटाना हैं तो हम margin 0 का इस्तेमाल करते हैं.

CSS में हम margin को 4 तरीकों से दे सकते है

पहला हम किसी box में जिस side आपको margin चाहिए उस side का नाम देकर margin दे सकते हैं.

  • margin-left: 10px;
  • margin-right: 30px;
  • margin-top: 20px;
  • margin-bottom: 50px;

दूसरा हम box के चारों side से margin को एक साथ लिखकर दे सकते हैं margin हमेशा clockwise दिशा में चलता है यानि की top right bottom तथा left दिशा में –

इसमें 20px top से, 30px right से, 60px bottom से तथा 10px left से margin होगा.

तीसरा तरीका हम top, bottom की एक साथ और left, right की एक साथ margin दे सकते है

इसमें 20px top तथा bottom से 50px left तथा right side से margin होगा

चौथा हम एक साथ तीन तरीके से top की एक साथ left तथा right की एक साथ और bottom की एक साथ margin दे सकते है.

CSS padding property क्या है और उसका इस्तेमाल

अगर हमें किसी box text image तथा button में border के अंदर की side space देना हो तो हम padding का इस्तेमाल करते है. padding को हम border के अंदर से top bottom left तथा right side से दे सकते हैं padding को हम browser में देखने के लिए website में right click कर inspect element कर देख सकते हैं जो हमें हल्के green color में दिखाई देता हैं.

CSS padding top

अगर हमें box में border के अंदर केवल ऊपर से space देना हो तो हम padding top property का इस्तेमाल करते हैं जिसमे हमारा border के अंदर का text या image नीचे खिसक जाता हैं.

CSS padding bottom

हमें अगर box में border के अंदर image या text के नीचे की side space देना हो तो हम padding bottom का इस्तेमाल करते हैं. जिसमे हमारा box के अंदर का text अपनी जगह बना रहता है तथा box के नीचे, दाए और बाए का border नीचे खिसक जाता है.

CSS padding left

किसी box में border के अंदर left side से space चाहिए तो हम padding left का इस्तेमाल करते है जिससे हमारा box के अंदर text left से right side की तरफ खिसक जाता है. left border अपनी जगह बना रहता है तथा top, right, bottom border right side की तरफ खिसक जाते है.

CSS padding right

हमें अगर box में border के अंदर right side से space चाहिए तो हम padding right का इस्तेमाल करते है जिससे हमारा box के अंदर का text तथा image right side से left side की तरफ खिसक जाता है. right side का border अपनी जगह बना रहता है top bottom तथा left border left side की तरफ खिसक जाता है.

CSS padding 0

css padding 0 का इस्तेमाल हम किसी box के चारों side से padding हटाने के लिए करते है अगर हमें किसी box में left side padding हटाना है तो हम केवल padding-left 0 का इस्तेमाल करेंगे जिससे हमारा top bottom right side की padding बनी रहेगी.

margin की तरह हम css में padding को 4 तरीकों से दे सकते है

पहला हम किसी box में जिस side से आपको padding चाहिए उस side का नाम देकर लिख सकते है

  • padding-top: 30px;
  • padding-bottom: 50px;
  • padding-left: 80px;
  • padding-right: 20px;

दूसरा तरीका हम box के चारों side के लिए एक साथ padding लिखकर दे सकते है padding की दिशा margin की तरह हमेशा clockwise दिशा में चलता है यानि की top right bottom तथा left दिशा मे

इसमें 30px top, 50px right, 80px bottom तथा 60px left side padding होगी.

तीसरा तरीका हम top bottom की एक साथ तथा left right की एक साथ padding दे सकते है.

इसमें 30px top तथा bottom से और 80px left तथा right side से padding होगी.

चौथा तरीका हम तीन जगह से top की एक साथ left और right की एक साथ तथा bottom की एक साथ padding दे सकते हैं.

CSS में margin और padding क्या है और Margin और Padding में क्या अंतर है तथा उनके property में अंतर के बारे में basic और सरल भाषा में समझाया गया हैं अगर आपको padding और margin से संबंधित कोई सवाल हो आपने नीचे comment box में पूछ सकते हैं. ज्यादा जानकारी के लिए आप w3school की website से पढ़ सकते हैं.

jeewan.basera@gmail.comhttps://hindischool.net
Jeewan, मै hindischool.net का foundur हूँ मै एक professional web designer और graphic designer हूँ मुझे इस क्षेत्र में 4 साल का अनुभव है और यहाँ में अपने अनुभव को blog के जरिये लोगों के साथ शेयर करता हूँ मुझे हिंदी मै blog लिखना पसंद है, graphic और website से संबंधित किसी भी प्रकार की सहायता के लिए आप social media या comment के जरिए अपने सवाल पूछ सकते है.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Stay Connected

21,570FansLike
3,432FollowersFollow
0SubscribersSubscribe

Latest Articles