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

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

11

No HTML5, a <hr>tag define uma quebra temática. No HTML 4.01, a <hr>marca representa uma regra horizontal.

http://www.w3schools.com/tags/tag_hr.asp

Então, após a definição, eu preferiria <hr>

— bpoiss
fonte

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

0

Este é um exemplo relativamente simples e funcionou para mim.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Recurso: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html