सभी HTML एलिमेंट्स की CSS Display प्रॉपर्टी के लिए एक डिफॉल्ट मान सेट होता है। यह प्रॉपर्टी निर्दिष्ट करती है कि एलिमेंट डॉक्यूमेंट में कैसे रेंडर होगा।
नोट: डिफॉल्ट display प्रॉपर्टी को ओवरराइड किया जा सकता है लेकिन इससे एलिमेंट का टाइप नहीं बदलता, केवल डॉक्यूमेंट पर उसका डिस्प्ले व्यवहार बदलता है।
CSS Display प्रॉपर्टी के कुछ मान निम्नलिखित हैं:
- Block
- Inline
- Inline-Block
- None
उदाहरण
आइए CSS Display प्रॉपर्टी का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Display</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: block; /*default value for <div>*/ height: 40px; width: 100%; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
एक और उदाहरण
आइए CSS Display प्रॉपर्टी का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Display</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ height: 40px; color: white; border: 4px solid black; display: inline; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
