How to display paragraph elements as inline using CSS?

CSS has internal and inline styles that can be used to display the paragraph element in an inline manner. CSS is a language used for styling the HTML and XML texts. Changing the display property of an HTML element is a typical CSS job. The display attribute of an element indicates how it should be presented, such as block, inline, or inline-block. When displaying a paragraph element inline, the display property must be modified from its default block value to inline.

Here we are going to learn how to develop a css code that will display the paragraph elements as inline.


<p style="display : inline">..write the paragraph...</p>

The paragraph in HTML is represented by p tag. The display attribute defines how the content flows.

An element that is set to display "inline" will be displayed as an inline-level box, which means it will flow within a line of text.

In contrast, a "block" element will fill the entire width of its parent container and add a new line of content below any existing content.

Headings, paragraphs, and div elements are examples of block-level elements while links, span elements, and images are examples of inline elements.

Properties Used

The following properties used in the example are −

  • color − Define the color of the text.

  • background-color − Define the text to be thin or thick.

  • display − The display property specifies the display behavior.


In this example, we will start using the paragraph elements to set a few lines of text. To display the paragraph element as inline it will use the property of display to set the value inline using inline CSS. Then styling some elements i.e. body, p that engage the user interaction on the webpage.

<!DOCTYPE html>
<title>Display paragraph elements as inline using CSS</title>
<body style="background-color: powderblue;">
      <h1>Rich Dad and Poor Dad</h1>
   <p style="background-color:#a89032; color: white; font-style: italic; display: inline;">Rich
      Dad Poor Dad, by Robert Kiyosaki, was initially published in 1997 and immediately became a must-read
      for anybody interested in investment, money, or the global economy. The book has been translated into
      dozens of languages and sold all over the world, becoming the best-selling personal finance book of all
      time. Rich Dad Poor Dad's overriding theme is how to use money as a tool for wealth growth. It debunks
      the idea that the wealthy are born wealthy, explains why your personal residence may not be an asset,
      defines the distinction between an asset and a liability, and much more.
   <p style="font-weight: bold; text-align: right; display: inline; color: darkgreen;"></p>


In the above output, we can see how the layout of text style is controlled with the help of inline value in the display properties of CSS. This is a good idea to test the changes of the display paragraph element as inline. To maintain the flexibility of text position, sometimes it is right to change the property of the display.

Updated on: 16-May-2023


Kickstart Your Career

Get certified by completing the course

Get Started