How can I define line breaks between elements of a layout?

Question

I’m adding CSS and HTML and one of the doubts that always arise to me is in the way I should define the line break between elements of a layout.

For example:

<p>Nome</p>
<input type="text" name="nome">
<button name="salvar">Salvar</button>

In the code above I can use the tag <br> to break the line between the button and the field, see the result:

<p>Nome</p>
<input type="text" name="nome">
<br>
<button name="salvar">Salvar</button>

However, it seems more sensible to use the tag <br> to break lines of text and not elements. However, I don’t know how I can do this using CSS.

Therefore, I would like to have these doubts clarified.

Doubts

1. How can I define line breaks between elements of a layout without using the tag <br>?
2. I can use the <br>? If not, why not use it for line break?

Answer 1

A hint I give you would be to read this question to understand well what is the <br> etc. <br> is obsolete?

But in short <br> is to break lines of text, or separates into lines elements that are of the type inline. So as in your example input and button are elements of the type inline there is no problem in using the br to break the line between them. Here you can refer to the list of HTML elements that are inline https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

Already the elements of the type block break the line automatically as they are 100% wide and nothing stands next to them on the same line. This is the case for elements like div, p or h1 for example. List of HTML elements of type block https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

But nothing prevents you from taking an element that by default is inline ,as a label, and put in it display:block, this will cause the element that comes next to this label go to the bottom line, since now the label will take up to 100% of the width it is with display:block.

An example of how an element of type block can stay inline and as an element of the inline can stay block.

h2 {
    display: inline;
}
label {
    display: block;
}

<p>duas h2 com display:inline</p>
<h2>h2 na mesma linha</h2>
<h2>que outro h2</h2>
<hr>
<p>agora duas label com display:block</p>
<label for="">uma label na linha 1</label>
<label for="">uma label na linha 2</label>

---

One tip I give you is to read about the Box Model to understand well how an HTML element is constituted, as it occupies its own space and the space around it: https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Understanding the Box Model you will understand better when and why change the type of display of an element, so that element can pass the accepted for example margin-top, and other properties that would be of an element block and an element inline.