Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to avoid a new line with tag?

  • Last Updated : 25 Jun, 2021

The p tag in HTML represents a paragraph. It is a block-level element which means that the text which is present inside the paragraph tag is considered as a block and it takes up the full width available. By default, the browser applies a line break before and after the p tag to separate the paragraphs. 
We can achieve this by adding the following style definition: 
 

p {
   display:inline;
}

Example 1: 
In this code, we have used the display attribute and set it to inline which will change the default behavior of paragraph tag and make it behave like an inline element. By using the inline property we can avoid the new line. 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
         p {
            padding:5px;
            border:1px solid black;
            color:green;
            font-size:24px;
 
          }
         #p2{
             display:inline;
          }
 
     </style>
</head>
<body>
    Random Text1
    <p id="p1">Geeks for Geeks</p>
 
    Random Text2
    <p id="p2">Geeks for Geeks </p>
 
    Random Text3
 
</body>
<script>
      
</script>
</html>

Output: 
 



Example 2: 
In this code, we have used the inline styling to avoid the new line with paragraphs. The approach is the same as above 
 

html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
         p {
            padding:5px;
            border:1px solid black;
            color:green;
            font-size:24px;
 
          }
 
     </style>
</head>
<body>
    Random Text1
    <p id="p2" style="display:inline">Text without new line </p>
 
    Random Text3
 
</body>
<script>
      
</script>
</html>

Output: 
 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :