How To Avoid A New Line With Tag? - GeeksforGeeks

Trang chủ » Html P Tag Alternative » How To Avoid A New Line With Tag? - GeeksforGeeks

Có thể bạn quan tâm

To avoid a new line with HTML tags, you can use inline elements instead of block elements. Inline elements, such as <span>, <a>, <img>, and <strong>, do not cause a line break after they are used, unlike block elements like <div>, <p>, or <h1>. This article will show you how to use CSS to make block elements behave like inline elements, preventing unwanted line breaks.

Approach

The <p> tag in HTML represents a paragraph and is a block-level element. By default, block-level elements take up the full width available, and browsers apply a line break before and after them. To avoid this behavior, we can change the display property of these elements to inline.

Syntax:  

To change the default behavior of a paragraph tag and make it behave like an inline element, use the following CSS:

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:1pxsolidblack; 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> </html>

Output: 

Example 2: In this code, we have used the inline styling to avoid the new line with paragraphs.

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:1pxsolidblack; color:green; font-size:24px; } </style> </head> <body> Random Text1 <p id="p2" style="display:inline">Text without new line </p> Random Text3 </body> </html>

Output: 

By changing the display property of block-level elements to inline, you can prevent unwanted line breaks and create more flexible layouts. This technique is particularly useful when you want to keep multiple elements on the same line.

Comment More info Next Article How to declare variables in different ways in JavaScript?

R

RitikGarg2 Follow Improve

Từ khóa » Html P Tag Alternative