Unidad 3. Básico: Lados de un elemento

Referirse a los lados de un elemento

Tenemos que imaginar los elementos html como rectángulos. A cada uno de estos lados, nos referimos por su nombre en inglés, utilizando top (arriba), right (derecha), bottom (abajo) y left (izquierda).

Algunas propieades se aplican sobre los lados del elemento, principalmente border, margin y padding. Por ejemplo, al establecer style="border-color: blue; margin: 10px" indicamos un borde azul y un margen de 10px para los cuatro lados.

Si queremos referirnos concretamente a alguno de los lados, lo hacemos añadiendo la posición a la propiedad. Por ejemplo margin-top: 5px; o border-bottom:red 1px solid;.

Ahora, cuando queremos definir todos con valores distintos, resulta incómodo tener que hacerlo lado por lado. Pero existe la posibilidad de definirlos todos a la vez en la misma propiedad. Vamos a verlo utilizando como ejemplo el color de borde, que se ve fácilmente:

border-color: blue;

Establece el mismo valor para los cuatro lados. Equivaldría a poner border-top-color: blue;border-right-color: blue;border-bottom-color: blue;border-left-color: blue;.

 

border-color: blue yellow;

Establece valores iguales para lados opuestos. El primer valor se refiere a top y bottom. El segundo a left y right. Equivaldría a poner border-top-color: blue; border-right-color:yellow; border-bottom-color: blue; border-left-color:yellow;.

 

border-color: blue yellow red;

Los valores, por orden, se refieren a top, left-right y bottom. Equivaldría a poner border-top-color: blue; border-right-color:yellow; border-bottom-color: red; border-left-color:yellow;.

 

border-color: blue yellow red lime;

Establece distinto valor para los cuatro lados, en el orden top, right, bottom, left. Equivaldría a poner border-top-color: blue; border-right-color:yellow; border-bottom-color: red; border-left-color: lime;