Líneas
horizontalesLíneas
horizontalesEn esta página se comentan las propiedades que se pueden aplicar a una línea horizontal <hr /> de una página web:
Nota: Internet Explorer 8 muestra prácticamente correctamente las líneas horizontales. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.
La propiedad height establece la altura de la línea.
  |
hr {
background-color: black;
height: 10px;
}
|
La propiedad width establece la anchura de la línea. Conviene expresarla como porcentaje.
| |
hr {
background-color: black;
height: 10px;
width: 50%;
}
|
Volver al principio de la página
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 Internet Explorer tener establecida la propiedad height.
  |
hr {
background-color: red;
}
|
|
| |
hr {
background-color: red;
height: 1px;
}
|
|
| |
hr {
background-color: red;
height: 2px;
}
|
|
| |
hr {
background-color: red;
height: 3px;
}
|
|
| |
hr {
background-color: red;
height: 10px;
}
|
En Firefox la propiedad color establece el color del borde de la línea, pero en Internet Explorer no.
| |
hr {
color: red;
}
|
|
| |
hr {
color: red;
height: 1px;
}
|
|
| |
hr {
color: red;
height: 10px;
}
|
Tanto en Internet Explorer como en Firefox la propiedad border-color establece el color del borde de la línea (aunque no se ve exactamente igual).
| |
hr {
border-color: red;
}
|
|
| |
hr {
border-color: red;
height: 1px;
}
|
|
| |
hr {
border-color: red;
height: 10px;
}
|
Volver al principio de la página
Si no se indican los márgenes, las líneas se alinean al centro.
| |
hr {
background-color: red;
height: 10px;
width: 50%;
}
|
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 {
background-color: red;
height: 10px;
margin-left: 0%;
margin-right: 50%
}
|
|
| |
hr {
background-color: red;
height: 10px;
margin-left: 50%;
margin-right: 0%
}
|
|
| |
hr {
background-color: red;
height: 10px;
margin-left: 50%;
margin-right: 25%
}
|
No conviene utilizar la propiedad width junto con margin-left y margin-right, porque Internet Explorer no la interpreta correctamente:
En el ejemplo siguiente, la línea se sitúa a la izquierda del todo en Firefox, pero en el centro en Internet Explorer:
| |
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 en Firefox, pero en el centro en Internet Explorer:
| |
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 en Firefox, pero en el centro de la mitad derecha en Internet Explorer:
| |
hr {
background-color: red;
height: 10px;
margin-left: 50%;
width: 25%;
}
|
Volver al principio de la página
Autor: Bartolomé Sintes Marco