CSS हमें किसी एलिमेंट के व्यक्तिगत पक्षों के आसपास की जगह को नियंत्रित करने की अनुमति देता है। CSS margin प्रॉपर्टी निम्नलिखित प्रॉपर्टीज के लिए एक शॉर्टहैंड है: margin-top, margin-right, margin-bottom और margin-left।
सिंटैक्स
CSS margin प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { margin-top: /*value*/ margin-right: /*value*/ margin-bottom: /*value*/ margin-left: /*value*/ }
निम्नलिखित उदाहरण CSS margin प्रॉपर्टी को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> div { margin-left: auto; margin-bottom: 4em; width: 30%; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; outline: thin dotted; text-align: center; } div + div { margin-right: 30%; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 45%; margin-top: -190px; box-shadow: inset 0 0 6px orange; } </style> </head> <body> <div> This is demo text </div> <div>One (different margins)</div> <div>Two (different margins)</div> </body> </html>
आउटपुट
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> div { margin-top: 7%; margin-left: 25%; margin-bottom: -3em; width: 40px; height: 40px; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; border-top-right-radius: 100px; } div + div { margin-right: 30%; border-top-right-radius: unset; border-top-left-radius: 100px; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 25%; margin-top: -140px; box-shadow: inset 0 0 6px orange; border-bottom-right-radius: 100px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
आउटपुट
