মান ইনলাইন-ব্লক সহ CSS ডিসপ্লে প্রপার্টি কন্টেন্টের প্রস্থ বা প্রদত্ত প্রস্থ অনুযায়ী যেটি বেশি হয় একটি এলিমেন্ট রেন্ডার করে, এটি প্যারেন্ট এলিমেন্টের প্রস্থ সম্পূর্ণরূপে ব্যবহার না হওয়া পর্যন্ত লাইন ব্রেক করতে বাধ্য করে না।
সিনট্যাক্স
CSS ডিসপ্লে ইনলাইন-ব্লক -
এর সিনট্যাক্স নিচে দেওয়া হলSelector {
display: inline-block;
} উদাহরণ
আসুন CSS ডিসপ্লে ইনলাইন-ব্লক -
এর একটি উদাহরণ দেখি<!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 ডিসপ্লে ইনলাইন-ব্লক -
এর আরেকটি উদাহরণ দেখি<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
