डिस्प्ले प्रॉपर्टी वैल्यू ब्लॉक का उपयोग एक तत्व को एक नई लाइन पर शुरू करने के लिए बनाता है। इसके साथ, यह पूरी चौड़ाई लेता है। इसलिए, तत्व को ब्लॉक तत्व के रूप में प्रदर्शित किया जाता है।
उदाहरण
आइए अब CSS में डिस्प्ले ब्लॉक को लागू करने के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo1 {
display: block;
}
p.demo2 {
display: inline-block;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019.
</div>
<hr />
<div>
Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019.
</div>
</body>
</html> आउटपुट
आइए अब एक और उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
p.demo {
display: block;
}
</style>
</head>
<body>
<h1>Student Result</h1>
<div>
The result of MCA student will be declared on <p class="demo">20th Decemeber 2019</p>Check the website on the same day at 8PM.
</div>
</body>
</html> आउटपुट
