How To New Line In Css

by

Creating a new line in CSS is an essential skill to have when designing your web pages. In this blog post, we will discuss how to create a new line using CSS, providing examples and tips to help you master this skill.

Using the display: block; Property

The simplest and most common method to create a new line in CSS is to use the display: block; property. When an element has a display: block; property, it forces a line break before and after the element, causing the next element to appear on a new line.

For example, let’s say you have the following HTML:

    <span>First line</span>
    <span>Second line</span>

By default, these two <span> elements will appear on the same line. To force a new line, you can apply the display: block; property to the <span> elements in your CSS:

    span {
        display: block;
    }

Now the two <span> elements will appear on separate lines.

Using the white-space: pre; Property

Another method to create a new line in CSS is by using the white-space: pre; property. This property preserves whitespace characters as they are in the HTML, including newline characters. To use this method, you would simply add newline characters in your HTML where you want the new lines to appear.

For example, let’s say you have the following HTML:

    <pre>
    First line
    Second line
    </pre>

By default, the newline character between the two lines of text will not be rendered. To force the newline character to be rendered, you can apply the white-space: pre; property to the <pre> element in your CSS:

    pre {
        white-space: pre;
    }

Now the two lines of text will appear on separate lines, as the newline character is preserved by the white-space: pre; property.

Using the <br> Element

While not strictly a CSS solution, inserting a <br> element in your HTML is another way to create a new line. This element is an inline element that creates a line break, causing the content following the <br> element to appear on a new line.

For example, let’s say you have the following HTML:

    First line<br>
    Second line

The <br> element creates a new line, so the two lines of text will appear on separate lines.

Conclusion

In this blog post, we’ve discussed three methods to create a new line in CSS: using the display: block; property, using the white-space: pre; property, and using the <br> element. By mastering these techniques, you’ll be well-equipped to create clean and organized layouts for your web pages.