CSS से एलिमेंट्स की विजिबिलिटी नियंत्रित करना

CSS display प्रॉपर्टी

CSS display प्रॉपर्टी का उपयोग वेब पेज पर एलिमेंट्स की विजिबिलिटी नियंत्रित करने के लिए किया जाता है। इसके कुछ मान:

उदाहरण 1: display:none और inline

<!DOCTYPE html>
<html>
<head>
<style>
span { background-color: orange; color: white; }
p.demo { display: none; }
span.demo1 { display: inline; }
</style>
</head>
<body>
<h1>Match Details</h1>
<div> Match will begin at <p class="demo">9AM</p> 10AM on 20th December. </div>
<div> Match will end at <span class="demo1">5PM</span> on 20th December. </div>
</body>
</html>

आउटपुट

उदाहरण 2: block और inline-block

<!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>
<div> Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019. </div>
</body>
</html>

आउटपुट