अब हम CSS डिस्प्ले के दो-मूल्य वाले सिंटैक्स द्वारा एलिमेंट के डिस्प्ले टाइप को स्पष्ट रूप से सेट कर सकेंगे। यह हमें एलिमेंट के फ्लो लेआउट को बदलने की अनुमति देगा।
सिंटैक्स
CSS डिस्प्ले प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { display: /*inside*/ /*outside*/ }
उदाहरण 1
निम्न उदाहरण CSS डिस्प्ले प्रॉपर्टी को दर्शाते हैं।
<!DOCTYPE html> <html> <head> <style> body,div,span { box-shadow: inset 0 0 12px lightgreen; border: 2px dotted gray; } span { padding: 2%; display: inline flow-root; } </style> </head> <body> <div> <p> Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus. </p> <img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" /> <span>Inline Block</span> <span>Span</span> Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia. </div> </body> </html>
यह Firefox में निम्न आउटपुट देता है:
उदाहरण 2
<!DOCTYPE html> <html> <head> <style> body,div,span { margin: 2%; box-shadow: inset 0 0 12px orange; border: 2px ridge cadetblue; } span { padding: 2%; display: block flow; } </style> </head> <body> <div> <p> Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus. </p> <span>Block is now</span> <span>Block Flow</span> Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia. </div> </body> </html>
इससे निम्न आउटपुट मिलता है:
