मूल्य ब्लॉक के साथ सीएसएस डिस्प्ले प्रॉपर्टी माता-पिता की पूरी चौड़ाई के साथ एक तत्व प्रस्तुत करती है, यह एक लाइन ब्रेक को भी मजबूर करती है। ब्लॉक के रूप में प्रदर्शित होने वाला तत्व
या
तत्व के रूप में प्रस्तुत होता है।
सिंटैक्स
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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
