अब हम CSS डिस्प्ले के दो महत्वपूर्ण सिंटैक्स द्वारा प्रदर्शन प्रकार के तत्वों को स्पष्ट रूप से सेट करने में सक्षम होंगे। यह हमें तत्व के प्रवाह लेआउट को बदलने की अनुमति देगा
सिंटैक्स
CSS डिस्प्ले प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
display: /*inside*/ /*outside*/
} उदाहरण
निम्नलिखित उदाहरण 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 में निम्न आउटपुट देता है
उदाहरण
<!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> यह निम्न आउटपुट देता है
