ব্লক-স্তরের উপাদানগুলির তাদের CSS ডিসপ্লে আছে প্রপার্টি হয় 'ব্লক', 'লিস্ট-আইটেম' বা 'টেবিল'-এ সেট করে এবং এই উপাদানগুলি নিজেদের উপরে এবং নীচে একটি লাইন বিরতি বাধ্য করে। ব্লক-লেভেল বক্সগুলি প্রতিটি ব্লক-লেভেল উপাদান দ্বারা তৈরি করা হয় যা পজিশনিং স্কিমের একটি অংশ এবং সেইসাথে চাইল্ড বক্স রয়েছে৷
ব্লক কন্টেইনার বাক্সে হয় ব্লক-লেভেল বক্স থাকে এবং ব্লক ফরম্যাটিং প্রসঙ্গ অনুসরণ করে অথবা ইনলাইন-লেভেল বক্স থাকে এবং ইনলাইন ফরম্যাটিং প্রসঙ্গ অনুসরণ করে। ব্লক বক্স একটি শব্দ ব্যবহৃত হয় যদি ব্লক-স্তরের বাক্সগুলি ব্লক কন্টেইনার হয়।
বেনামী ব্লক বক্স হল সেই বাক্স যার উপর ডেভেলপারের কোন নিয়ন্ত্রণ নেই। যদি একটি ইনলাইন বক্সে একটি ব্লক বক্স থাকে এবং ব্লক বক্সের চারপাশে ইনলাইন বিষয়বস্তু একটি বেনামী ব্লক বক্সে আবদ্ধ থাকে৷
উদাহরণ
আসুন ব্লক-লেভেল এলিমেন্ট এবং ব্লক বক্স -
-এর উদাহরণ দেখি<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
