Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display paragraph elements as inline using CSS?
The CSS display property can be used to change how paragraph elements are displayed. By default, paragraphs are block-level elements that take up the full width and create line breaks. Setting display: inline makes them flow within the same line as surrounding text.
Syntax
p {
display: inline;
}
Default vs Inline Display
Block-level elements like paragraphs normally:
Take up the full width of their container
Create line breaks before and after
Stack vertically
Inline elements:
Flow within a line of text
Only take up as much width as needed
Do not create line breaks
Example: Multiple Inline Paragraphs
The following example shows how paragraphs behave when set to display: inline
<!DOCTYPE html>
<html>
<head>
<style>
.inline-paragraph {
display: inline;
background-color: #f0f0f0;
padding: 5px;
margin: 3px;
border: 1px solid #ccc;
}
.normal-paragraph {
background-color: #e6f3ff;
padding: 5px;
border: 1px solid #007acc;
}
</style>
</head>
<body>
<h3>Normal Block Paragraphs:</h3>
<p class="normal-paragraph">This is paragraph 1</p>
<p class="normal-paragraph">This is paragraph 2</p>
<p class="normal-paragraph">This is paragraph 3</p>
<h3>Inline Paragraphs:</h3>
<p class="inline-paragraph">This is paragraph 1</p>
<p class="inline-paragraph">This is paragraph 2</p>
<p class="inline-paragraph">This is paragraph 3</p>
</body>
</html>
Normal Block Paragraphs: Three blue-bordered paragraphs stacked vertically, each taking full width. Inline Paragraphs: Three gray-bordered paragraphs flowing horizontally on the same line.
Example: Inline Paragraphs with Text
This example demonstrates inline paragraphs mixed with regular text
<!DOCTYPE html>
<html>
<head>
<style>
.inline-text {
display: inline;
background-color: #fffacd;
font-weight: bold;
color: #8b4513;
}
</style>
</head>
<body>
<p>Welcome to our website!
<p class="inline-text">This paragraph is displayed inline</p>
and flows naturally with the surrounding text.
<p class="inline-text">This second paragraph also flows inline</p>
without creating line breaks.</p>
</body>
</html>
A continuous line of text where the inline paragraphs (highlighted in light yellow with brown text) flow seamlessly within the normal paragraph text without line breaks.
Conclusion
Using display: inline on paragraphs removes their default block behavior, making them flow within text lines. This technique is useful for creating inline content sections or text highlights that don't disrupt the natural text flow.
3K+ Views
