মান ব্লক সহ সিএসএস ডিসপ্লে সম্পত্তি পিতামাতার সম্পূর্ণ প্রস্থ উপলব্ধ সহ একটি উপাদান রেন্ডার করে, এটি একটি লাইন বিরতিও বাধ্য করে। ব্লক হিসাবে প্রদর্শন সহ একটি উপাদান
বা
উপাদান হিসাবে রেন্ডার করে।
সিনট্যাক্স
নিচে CSS ডিসপ্লে ব্লক -
এর সিনট্যাক্স দেওয়া হলSelector {
display: block;
} উদাহরণ
চলুন CSS ডিসপ্লে ব্লক -
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Display Block</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
em{
background-color: #C303C3;
color: #fff;
display:block;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-Block</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
for(i=0; i<2; i++){
var italicObject = document.createElement("EM");
var italicText = document.createTextNode(textSelect.value);
italicObject.appendChild(italicText);
divDisplay.appendChild(italicObject);
}
}
</script>
</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">heyyy</span>
<div><span id="none">heyyy</span>
<div>
<span class="inline-block">heyyy</span>
<span class="inline-block">heyyy</span>
<div>
<span class="grid">heyyy demo</span>
<span class="grid">heyyy demo</span>
</div>
</div>
</div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
