Uma dica que te dou seria dar uma lida nessa pergunta para entender bem o que é o <br>
etc <br> está obsoleto?
Mas resumindo <br>
é para quebrar linhas de texto, ou separa em linhas elementos que são do tipo inline. Então como no seu exemplo o input
e button
são elementos do tipo inline não há problema em usar o br
para quebrar a linha entre eles. Aqui vc pode consultar a lista dos elementos HTML que são inline https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente
Já os elementos do tipo block quebram a linha automaticamente, pois eles têm 100% de largura e nada fica ao lado deles na mesma linha. É o caso para elementos como div
, p
ou h1
por exemplo. Lista de elementos HTML do tipo block https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Mas nada impede que vc pegue um elemento que por default é inline ,como uma label
, e coloque nela display:block
, isso vai fazer com que o elemento que venha ao lado dessa label
passe para linha de baixo, já que agora a label
vai passar a ocupar 100% da largura por estar com display:block
.
Um exemplo de como um elemento do tipo block pode ficar inline e como um elemento do tipo inline pode ficar 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>
Uma dica que te dou é ler sobre o Box Model para entender bem como um elemento HTML é constituído, como ele ocupa o próprio espaço e o espaço ao seu redor: https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model
Entendendo o Box Model vc vai entender melhor quando e porque mudar o tipo de display
de um elemento, assim esse elemento pode passar a aceita por exemplo margin-top
, e outras propriedades que seriam de um elemento block e um elemento inline.