- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display Inline using CSS
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 −
<!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 −
<!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>Output
Published on 30-Dec-2019 12:21:23
- Related Questions & Answers
- Display Inline-Block using CSS
- Display Inline Working with CSS
- Display Inline-Block Working with CSS
- Inline-level Elements and Inline Boxes in CSS
- Working with Inline CSS
- Display Block using CSS
- Display Property Using in CSS
- Display None Using in CSS
- What are Inline List Items in CSS
- Changing the Default Display Value using CSS
- How to use inline CSS (Style Sheet) in HTML?
- How to create a responsive inline form with CSS?
- Display an Icon from Image Sprite using CSS
- Build Horizontal Navigation Bar with Inline List Items in CSS
- Who to Change the Default Display Value using CSS
Advertisements