Display on new line css

To display text or an element on a new line in CSS, you can use the following properties:

  1. white-space: pre; - This property will preserve the whitespace in the HTML and display it as is, which can create a new line.
  2. display: block; - This property will display the element as a block-level element, which will start on a new line.
  3. margin-bottom: auto; - This property will add a margin to the bottom of the element, which can create a new line.
  4. line-break: auto; - This property is not supported in all browsers, but it can be used to specify where a line break should occur.

Here are some examples:

Example 1: Using white-space: pre;

<p style="white-space: pre;">This text will be displayed on a new line.</p>

Example 2: Using display: block;

<p style="display: block;">This text will be displayed on a new line.</p>

Example 3: Using margin-bottom: auto;

<p style="margin-bottom: auto;">This text will be displayed on a new line.</p>

Example 4: Using line-break: auto; (not supported in all browsers)

<p style="line-break: auto;">This text will be displayed on a new line.</p>

You can also use the br element to create a new line:

<p>This text will be displayed on a new line.<br>This text will also be displayed on a new line.</p>

Note that the br element is not a CSS property, but an HTML element that creates a line break.