CSS margin प्रॉपर्टी का उपयोग चयनित एलिमेंट के बॉर्डर्स के चारों ओर मार्जिन क्षेत्र सेट करने के लिए किया जाता है। margin प्रॉपर्टी margin-top, margin-right, margin-bottom, और margin-left के लिए एक शॉर्टहैंड है।
सिंटैक्स
CSS margin प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { margin: /*value*/ }
निम्नलिखित उदाहरण CSS margin प्रॉपर्टी को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> body * { display: flex; float: left; margin: 10px 15px; border: thin solid; text-align: center; width: 40%; border-radius: 5%; box-shadow: 0 0 4px 1px grey; } p { font-family: "Sim Sun", monospace; background-color: lightcyan; } div { font-family: Impact, cursive; background-color: lightgreen; } </style> </head> <body> <p>First demo text</p> <div>A demo line goes like this..</div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
एक और उदाहरण
<!DOCTYPE html> <html> <head> <style> table, table * { margin: 5% 30%; border: 12px double red; padding: 0.5rem; border-radius: 30px; } td:nth-child(even) { background-color: lightblue; } td:nth-child(odd) { background-color: lightgreen; } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
