# Líneas horizontales

En 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 las líneas horizontales de forma muy parecida a Firefox. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

## Tamaño: width y height

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. Se suele expresar como porcentaje.

    hr {
      background-color: black;
      height: 10px;
      width: 50%;
    }

Volver al principio de la página

## Color: color y background-color

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 y Chrome debe 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 y Chrome no lo hace.

    hr {
      color: red;
    }
    hr {
      color: red;
      height: 1px;
    }
    hr {
      color: red;
      height: 10px;
    }

En Firefox, Internet Explorer y Chrome la propiedad border-color establece el color del borde de la línea (aunque no se ve exactamente igual en Internet Explorer).

    hr {
      border-color: red;
    }
    hr {
      border-color: red;
      height: 1px;
    }
    hr {
      border-color: red;
      height: 10px;
    }

Volver al principio de la página

## Alineación: margin-left, margin-right y width

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%
    }

Internet Explorer no interpreta correctamente las propiedades margin-left y margin-right cuando se utilizan junto con width.

- En Firefox y Chrome, la línea se dibuja a la izquierda del espacio definido por los márgenes.
- En Internet Explorer, la línea se dibuja en el centro del espacio definido por los márgenes.

En el ejemplo siguiente, la línea se sitúa a la izquierda del todo en Firefox y Chrome, 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 y Chrome, 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 y Chrome, 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

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.