ইনলাইন-লেভেল এলিমেন্টদের CSS display প্রপার্টি 'inline', 'inline-table', বা 'inline-block' সেট করা থাকে এবং এগুলো নিজেদের আগে ও পরে লাইন ব্রেক বাধ্য করে না। প্রতিটি ইনলাইন-লেভেল এলিমেন্ট একটি ইনলাইন-লেভেল বক্স তৈরি করে যা পজিশনিং স্কিমার অংশ এবং চাইল্ড বক্স ধারণ করে।
ইনলাইন বক্স হলো যেসব বক্সের কন্টেন্ট ইনলাইন ফরম্যাটিং কন্টেক্সট অনুসরণ করে। ইনলাইন বক্সগুলো অনেক ইনলাইন বক্সে ভাগ হতে পারে, যেসব ইনলাইন বক্স কখনো ভাগ হয় না সেগুলোকে এটমিক ইনলাইন-লেভেল বক্স বলা হয়।
অ্যানোনিমাস ইনলাইন বক্স হলো যেসব বক্সের ওপর ডেভেলপারের কোনো কন্ট্রোল নেই। যদি একটি ব্লক বক্সে কিছু নগ্ন টেক্সট এবং অন্যান্য ইনলাইন-লেভেল বক্স থাকে, তবে ইনলাইন-লেভেল বক্সের চারপাশের নগ্ন টেক্সট ইনলাইন ফরম্যাটিং কন্টেক্সট অনুসরণ করে এবং অ্যানোনিমাস ইনলাইন বক্সে সমাহিত হয়।
উদাহরণ
ইনলাইন-লেভেল এলিমেন্ট এবং ইনলাইন বক্সের উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS Inline-level Elements and Inline Boxes</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; } input[type="button"] { border-radius: 10px; } .child{ 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 Inline-level Elements and Inline Boxes</legend> <div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
