How to display paragraph elements as inline using CSS ? Last Updated : 05 Nov, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report The purpose of this article is to display paragraph elements as inline elements using CSS. The display property in CSS is used for placing the components ("div", "hyperlink", "heading", etc) on the web page. The display property is set to inline. It has the default property of "anchor" tags. It is used to place the "div" inline i.e. in a horizontal manner. The inline option of display property ignores the "width" and "height" set by the user. Syntax: display: inline; Example: HTML <!DOCTYPE html> <html> <head> <style> #main { height: 200px; width: 200px; background: teal; display: inline; } #main1 { height: 200px; width: 200px; background: cyan; display: inline; } #main2 { height: 200px; width: 200px; background: green; display: inline; } .gfg { margin-left: 20px; font-size: 42px; font-weight: bold; color: #009900; } .geeks { font-size: 25px; margin-left: 30px; } .main { margin: 50px; } </style> </head> <body> <div class="gfg">GeeksforGeeks</div> <h2> How to display paragraph elements as inline elements using CSS? </h2> <p class="main"> <p id="main"> BLOCK 1 </p> <p id="main1"> BLOCK 2</p> <p id="main2">BLOCK 3 </p> </p> </body> </html> Output: Supported browsers are listed below: Google ChromeInternet ExplorerFirefoxOperaSafari Comment More infoAdvertise with us Next Article How to insert a DOM element after all paragraphs using jQuery ? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to make div elements display inline using CSS ? Displaying div elements inline allows them to share horizontal space and appear in a single line, making your layout more dynamic and responsive. This guide explores different CSS techniques to achieve this, including flexbox, inline-block, float, and span elements.Why Display Div Elements Inline?Re 3 min read How to find all paragraph elements using jQuery ? Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el 2 min read How to insert a DOM element after all paragraphs using jQuery ? In this article, we will insert a DOM element after all paragraph elements using jQuery. To insert a DOM element we use after() and createTextNode() methods. The createTextNode() method is used to create a TextNode which contains an element node and a text node. It is used to provide text to an elem 1 min read How to align the last line of a paragraph element to the right using CSS? In this article, we will set the alignment of last paragraph element to the right by using CSS property. To set the alignment of last paragraph to right, we use CSS text-align-last property. The text-align-last is used to set the last line of the paragraph just before the line break. The line break 2 min read How to add `style=display:“blockâ€` to an element using jQuery? To add the inline style style="display: block" to HTML elements using jQuery, there are several approaches, each with its advantages. Below are the different methods you can use:Table of ContentUsing the CSS() methodUsing the show() methodUsing the attr() methodUsing the prop() methodUsing the CSS() 3 min read How to add `style=display:“blockâ€` to an element using jQuery? To add the inline style style="display: block" to HTML elements using jQuery, there are several approaches, each with its advantages. Below are the different methods you can use:Table of ContentUsing the CSS() methodUsing the show() methodUsing the attr() methodUsing the prop() methodUsing the CSS() 3 min read Like