How to avoid a new line with tag?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.