CSS से display: inline उपयोग करना

इंलाइन एलिमेंट्स

ब्लॉक के विपरीत, इंलाइन एलिमेंट्स उसी लाइन में शुरू होते हैं और केवल आवंटित चौड़ाई लेते हैं।

उदाहरण 1

<!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

<!DOCTYPE html>
<html>
<head>
<style>
span#demo { background-color:orange; color: white; display:inline; }
</style>
</head>
<body>
<h1>Match Details</h1>
<div> Match will begin at <span id="demo">9AM</span> on 20th December. </div>
</body>
</html>

आउटपुट