texto - línea horizontal y forma correcta de codificarlo en html, css

lineas verticales en html

Question

Necesito dibujar una línea horizontal después de un bloque, y tengo tres formas de hacerlo:

1) Defina una clase h_line y añada funciones css, como

#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) Use la etiqueta hr

#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />

3) usarlo como una pseudoclass after

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>

¿Cuál es el más práctico?

Answer 1

En HTML5, la etiqueta <hr> define una ruptura temática. En HTML 4.01, la etiqueta <hr> representa una regla horizontal.

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

Entonces, después de la definición, preferiría <hr>

Answer 2

Mi solución simple es diseñar hr con css para tener cero márgenes superior e inferior, borde cero, altura de 1 píxel y color de fondo de contraste. Esto puede hacerse configurando el estilo directamente o definiendo una clase, por ejemplo, como:

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

Answer 3

Si realmente quieres un descanso temático , usa la etiqueta <hr> .

Si solo quieres una línea de diseño, podrías usar algo como la clase css

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

y usarlo como

<div class="block_1 hline-bottom">Cheese</div>

Answer 4

Yo iría por el marcado semántico, use un <hr/> .

A menos que sea solo un borde lo que desea, entonces puede usar una combinación de relleno, borde y margen para obtener el límite deseado.

Answer 5

depende del requisito, pero muchas sugerencias de los desarrolladores es hacer que su código sea lo más simple posible . por lo tanto, vaya con la simple etiqueta "hr" y el código CSS para eso.

Answer 6

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

texto enfatizado

Answer 7

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

Así es como html5boilerplate hace html5boilerplate :

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}