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.

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>