Margin y Padding y Border

Ahora lo que nos toca es tener bien en claro lo que son el Border, Margin y el Pading, ya que serán esos 3 conceptos los que nos den el estilo deseado muchas veces a nuestras páginas.

Border

Bueno no creo tener que traducir esa palabra, ya que se dice casi igual en ingles como en español con la única diferencia de la r al final. El border o borde es la ancho que tiene la línea que separa a un objeto con su entorno exterior.

Websito: Entonces hablando del cuerpo humano, nuestro borde seria nuestra piel?

Ja, hasta que le atinaste una websito

Websito: Para que veas!

Yaya sakese de aca ja, pues lo que nuestro amigo websito dijo tiene algo de razón, pero pongamosle mejor ejemplos con unos dibujos

Como vemos en la imagen, en la primera fila tenemos 3 imágenes con borde de 1px y en la segunda fila tenemos las mismas imágenes con el borde ahora de 3 pixeles.

Ahora como relacionamos esto al curso y a nuestra web?. Como saben en el curso de cómo crear una web nosotros usamos los divs como columnas, si se podría llamar asi, de la estructura y como se habran podido dar cuenta también estos divs son rectángulos que encierran algo, pero que no vemos los limites cuando lo visualizamos en nuestro navegador. Esto ocurre porque los divs por defecto tiene un borde de 0pxy por eso el borde es invisible. Así que, si nosotros queremos ver donde comienza y donde termina nuestros divs tan solo debemos ponerle los bordes.

La manera de hacerlo es muy sencilla y se maneja por los siguientes códigos como siempre dentro de una hoja de estilos.

.nombredeldiv {
            border-top: 5px;
            border-bottom: 6px;
            border-left: 7px;
            border-right: 8px;
}

border-top y border-bottom son los bordes de la parte superior e inferior respectivamente; mientras que border-left y border-right son los bordes de la parte izquierda y derecha respectivamente también.

Pero saben, viendo así a primer vista ese código veo que nos ocupara mucho espacio, imagínense hacer esas 4 lineas para cada div al que quieran poner border, pero no se preocupen porque esas 4 lineas las convertiremos en 1 sola, veamos.

Vamos a tomar nuestro borde empezando por la parte superior y seguimos en la dirección que siguen las manecillas de un reloj, osea arriba(top), derecha(right), abajo(bottom) e izquierda(left); nos quedaría ahora el código asi:

.nombredeldiv {

border: 5px 8px 6px 7px;
}

Las escribimos una después de otra dejando un espacio con la secuencia ya dicha arriba. Esto es lo mismo el el código grande de mas arriba, solo que en una linea

<<<<< Anterior Siguiente >>>>>