linha horizontal e maneira correta de codificá-lo em html, css

122

Preciso desenhar uma linha horizontal depois de algum bloco e tenho três maneiras de fazê-lo:

1) Defina uma classe h_linee adicione recursos css, como

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Use hrtag

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) use-o como um afterpseudoclasse

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

Qual o caminho mais prático?

html css Павел Тявин
fonte
2
Eu acho que <hr>é o mais semântico. Quero dizer, não é para isso que serve?
J08691
3
por que não usar border-bottom?
jsweazy
3
No HTML5, o elemento HTML <hr> representa uma quebra temática entre os elementos no nível do parágrafo (por exemplo, uma mudança de cena em uma história ou uma mudança de tópico em uma seção).
Scott Simpson

Respostas:

138 

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Expandir snippet

Aqui está como o html5boilerplate faz isso:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
moettinger
fonte
3
Nota: use margin: 1em autose quiser que ele esteja sempre no centro da página.
Jacques Marais
1
@JacquesMarais, não sei se isso é necessário, pois é um elemento de bloco sem largura definida, de modo que abrangeria a largura de todo o contêiner.
moettinger 24/02
65

Eu iria para marcação semântica, use um <hr/>.

A menos que seja apenas uma borda o que você deseja, você pode usar uma combinação de preenchimento, borda e margem para obter o limite desejado.

bevacqua
fonte
8
<hr>é HTML5 válido. Utilizado representa uma regra horizontal, mas agora é definido em termos semânticos como uma ruptura temática entre o conteúdo. A maioria dos navegadores ainda o exibirá como uma linha horizontal, a menos que seja dito o contrário. Fonte: developer.mozilla.org/pt-BR/docs/Web/HTML/Element/hr
AJMaxwell 30/6
O título diz linha horizontal e <hr /> é isso, então eu levanto isso. Talvez o título deva ter lido uma linha horizontal com estilo.
Ryan Bayne
10

Se você realmente quer uma pausa temática , use a <hr>tag.

Se você quer apenas uma linha de design, pode usar algo como a classe css

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

e use-o como

<div class="block_1 hline-bottom">Cheese</div>
serv-inc
fonte
5

Eu queria um longo traço como linha, então usei isso.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}
<div class="dash"></div>
Expandir snippet

Alia
fonte
5 

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
Expandir snippet

Nadeem Qasmi
fonte
Você não respondeu à pergunta "Qual é a mais prática?"
Brian Tompsett -
1

Minha solução simples é estilizar hr com css para ter zero margens superior e inferior, borda zero, altura de 1 pixel e cor de fundo contrastante. Isso pode ser feito definindo o estilo diretamente ou definindo uma classe, por exemplo, como:

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
FredG
fonte
1

depende do requisito, mas muitas sugestões de desenvolvedores são tornar o seu código o mais simples possível . então, use a tag "hr" simples e o código CSS para isso.

Ram Prasad
fonte
0 

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Expandir snippet
texto enfatizado

bruh
fonte
Por favor, adicione um comentário explicando sua resposta.
Barthy 06/02/19