I think I found an appropriate use of the <br> element

HTML-CSS
1

https://codepen.io/gtrman97/pen/eYBQMwE

I want the 4 red borders at the bottom right to be squares and make up a larger square.
If “Product Landing Page” heading is on one line then it ends up being more of a rectangle, so to make it more of a square I have to use <br>. Please tell me if there is another way.

2

It’s not an uncommon usage of the br tag to force the end of a block of text to a new line.

You can also put the word Page inside a span and set it to be a block-level element so it’s on its own line. Or some times you can just limit the max-width of the text to have the line-break where needed.

1 Like
3

It’s just I keep hearing on here how using that element is bad practice and you should use CSS for stuff like that.

4

It all depends on how you use it.
The br tag isn’t bad you just have to use it properly.

Writing stuff like this would be considered bad

  <h1>Welcome to My Portfolio</h1> 
    <br>
    <br>
    <br>
  <h2>A Web Developer's Work</h2>

But the way you used it is fine.

1 Like
5

A lot of beginners use it instead of using margin, which isn’t the correct usage. However, forcing a line-break in text is pretty much what the br tag is meant for.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.