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