7

Estou estuando CSS e HTML e uma das dúvidas que sempre me surgem é na maneira que devo definir a quebra de linha entre elementos de um layout.

Por exemplo:

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

No código acima eu posso usar a tag <br> para quebrar a linha entre o botão e o campo, veja o resultado:

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

No entanto, me parece mais sensato usar a tag <br> para quebrar linha de textos e não de elementos. Porém, eu não sei como eu posso fazer isso usando CSS.

Sendo assim, eu gostaria de ter essas dúvidas esclarecidas.

Dúvidas

  1. Como eu posso definir quebras de linha entre elementos de um layout sem usar a tag <br>?
  2. Eu posso usar o <br>? Caso não, quais seriam os motivos de não usa-lo para quebra de linha?

1 Resposta 1

8

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.

1
  • 1
    Eu "ia" reformular minha resposta. Mas você já retratou tudo que precisava...
    – LipESprY
    Commented 21/01/2019 às 23:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .