इंलाइन-ब्लॉक मान के साथ CSS Display प्रॉपर्टी एक एलिमेंट को कंटेंट की चौड़ाई या प्रदान की गई चौड़ाई के अनुसार रेंडर करती है, जो भी अधिक हो, यह पैरेंट एलिमेंट की चौड़ाई पूरी तरह उपयोग होने तक लाइन ब्रेक को बाध्य नहीं करती।
सिंटैक्स
CSS display inline-block का सिंटैक्स निम्नलिखित है:
Selector { display: inline-block; }
उदाहरण
आइए CSS display inline-block का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Display Inline-Block</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: inline-block; height: 40px; width: 40px; 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-Inline-Block</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 inline-block का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <style> #flex { display: flex; } #none { display: none; } .inline-block { display: inline-block; background-color: mintcream; } .grid { display: grid; background-color: cornflowerblue; } div { margin: 30px; padding: 5px; height: 10px; line-height: 5px; text-align: center; background-color: lightblue; border: 2px solid black; } div > div { background-color: lightpink; border: 2px solid green; } div > div > div { background-color: sandybrown; border: 2px solid darkred; } </style> </head> <body> <div><span id="flex">One</span> <div><span id="none">Two</span> <div> <span class="inline-block">Three</span> <span class="inline-block">Four</span> <div> <span class="grid">Five</span> <span class="grid">Six</span> </div> </div> </div> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
