En esta página se comentan las propiedades que se pueden aplicar a una línea horizontal <hr> de una página web. Estas propiedades no son específicas de las líneas horizontales, pero en algunos casos sí que tienen efectos específicos.
La propiedad height establece la altura de la línea.
hr {
height: 10px;
background-color: black;
}
La propiedad width establece la anchura de la línea. Se suele expresar como porcentaje.
hr {
height: 10px;
width: 50%;
background-color: black;
}
La propiedad background-color establece el color de la línea, aunque en Firefox la línea debe tener más de 2px de altura para ser visible y en Chrome basta con tener establecida la propiedad height.
hr {
background-color: red;
}
hr {
height: 1px;
background-color: red;
}
hr {
height: 2px;
background-color: red;
}
hr {
height: 3px;
background-color: red;
}
hr {
height: 10px;
background-color: red;
}
En Firefox la propiedad color establece el color del borde de la línea, pero en Chrome no lo hace, como se comenta en la página de diferencias entre navegadores.
hr {
color: red;
}
hr {
height: 1px;
color: red;
}
hr {
height: 10px;
color: red;
}
La propiedad border-color establece el color del borde de la línea.
hr {
border-color: red;
}
hr {
height: 1px;
border-color: red;
}
hr {
height: 10px;
border-color: red;
}
Si no se indican los márgenes, las líneas se alinean al centro.
hr {
height: 10px;
width: 50%;
background-color: red;
}
Para situar la línea en una posición determinada, se deben utilizar las propiedades margin-left y margin-right, sin utilizar la propiedad width. Los valores de estas propiedades se pueden expresar como distancias o como porcentajes.
hr {
height: 10px;
margin-left: 0%;
margin-right: 50%;
background-color: red;
}
hr {
height: 10px;
margin-left: 50%;
margin-right: 0%;
background-color: red;
}
hr {
height: 10px;
margin-left: 50%;
margin-right: 25%;
background-color: red;
}
Cuando se aplican las propiedades margin-left, margin-right y width a una línea, la línea se dibuja a la izquierda del espacio definido por los márgenes si hay margin-left o a la derecha si sólo hay margin-right.
En el ejemplo siguiente, la línea se sitúa a la izquierda del todo:
hr {
background-color: red;
height: 10px;
margin-left: 0%;
width: 50%;
}
En el ejemplo siguiente, la línea se sitúa a la derecha del todo:
hr {
background-color: red;
height: 10px;
margin-right: 0%;
width: 50%;
}
En el ejemplo siguiente, la línea se sitúa a partir del centro:
hr {
background-color: red;
height: 10px;
margin-left: 50%;
width: 25%;
}