CSS Display প্রপার্টির মান inline-block হলে এলিমেন্টটি কন্টেন্টের প্রস্থ বা প্রদত্ত প্রস্থ যেটি বড় সেটি অনুযায়ী রেন্ডার হয় এবং প্যারেন্ট এলিমেন্টের প্রস্থ পুরো ব্যবহার না হওয়া পর্যন্ত লাইন ব্রেক বাধ্য করে না।
সিনট্যাক্স
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>
আউটপুট
উপরোক্ত কোডের আউটপুট:
