Display Inline using CSS

CSS Web Development Front End Technology

Unlike block, the inline elements begin in the same line itself and takes only the allotted width. Let us now see an example to implement the display: inline property value in CSS −

Example

Let us now see an example −

Live Demo

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

Output

Example

Let us now see another example −

Live Demo

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