CSS margin प्रॉपर्टी margin-top, margin-right, margin-bottom, और margin-left के लिए एक शॉर्टहैंड है। यह हमें एलिमेंट्स के चारों ओर स्पेस निर्दिष्ट करने में सक्षम बनाती है। हम व्यक्तिगत साइड्स के लिए मार्जिन भी सेट कर सकते हैं।
सिंटैक्स
CSS margin प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { margin: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण CSS margin प्रॉपर्टी को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> div { margin: 10px 50px 20px; padding: 1rem; border: dashed; } p { text-align: center; } #demo { margin-left: -80px; box-shadow: inset 0 0 10px brown; } </style> </head> <body> <div></div> <p>This is demo text.</p> <p id="demo">Another demo text.</p> <p>This is new demo text.</p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
एक और उदाहरण
<!DOCTYPE html> <html> <head> <style> ul { margin: auto; background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple); width: 20em; } li { margin-top: 3px; } li + li { margin-left: -20px; } li:last-child { margin-left: 75px; } </style> </head> <body> <h2>Demo Heading</h2> <ul> <li>This is demo list item.</li> <li>This is another list item with different style.</li> <li>This is our third demo text with another style. </li> </ul> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
