IV-Propiedades de Caja

PROPIEDADES DE CAJA

Cuando definimos la CSS, hablamos de que estaba formada por una serie de Cajas. Ahora vamos a ver las características que pueden tener esas cajas.

 

Este gráfico a mi me ayudó a entenderlo. Como veis, hay tres elementos en los que vamos a definir distintas propiedades:

   -Margen

   -Borde

   -Padding

1-Margin (margen):

Son los espacios entre los bordes de la caja o box, y los bordes de otras cajas que pueda haber alrededor. Los márgenes se sitúan fuera de los bordes, y son, pues la parte mas exterior de la caja.
Los márgenes son siempre transparentes. Por ejemplo, si diseñamos un párrafo con fondo blanco, y el fondo de la página es azul, dicho párrafo será considerado por el navegador como un 'box' ; la parte interior (incluyendo contenido, padding y bordes) será blanca. Los márgenes, azules (el color del fondo de la página se verá a su través).

Dentro de Margin diferenciamos el margen superior, el inferior, el de la izquierda y de la derecha (margin-top, margin-bottom, margin-left, margin-right ). Tendremos que definir en cada uno de ellos las propiedades. Se les da un valor numérico, absoluto o porcentual. Los valores pueden expresarse en cualquiera de las unidades admisibles en CSS1: px, pt, etc...; y tambien en porcentajes.

 

 Vej  margin-left:0px;

margin-right:0px;

margin-top:0px;

margin-bottom:15px

 

2-Padding:

Funciona igual que Margin. También se definen características individualmente para padding-top, padding-botton, padding-left y padding-right. Usa los mismos valores que margin.

Básicamente, lo de padding te servirá en tu blog para ajustar al máximo el texto en la caja (por ejemplo tus post) o por el contrario aislarlo del resto de elementos para destacarlo. Yo no lo he modificado en mi blog.

3-Border (borde):

Sabemos que el borde es la línea que separa los margenes del padding. Hay que tener en cuenta que todo objeto HTML tiene un borde, que normalmente no se visualiza y tiene un valor fijo que determina el propio navegador.

Hay tres caracteristicas esenciales de los bordes que pueden ser definidas: color, estilo o anchura :

border color

border style  

border width)

Los valores podrán ser dintintos para cada uno de sus cuatro lados. Al igual que Margin y padding, Border también se diferencia en:

Border-top

Border-botton

Border-left

Border-right

Hay tres características esenciales de los bordes que pueden ser definidas:

 color, border color

 estilo, border style  

 anchura,  border width

Los valores podrán ser dintintos para cada uno de sus cuatro lados. En el caso de tener los cuatro lados las mismas características, no especificamos el lado, simplemente ponemos border

 · border color Como siempre, definiremos un color según el código hexagesimal

     vej  border-top: #CFCEC6;

 

 · border-style  Los valores que puede tomar son

·             none: no se visualiza ningun borde (aunque pueda especificarse su anchura).

 

·         dotted: el borde será una linea de puntos sobre el background del elemento.

 

·         dashed: el borde será una línea de guiones

 

·         solid: una línea normal.

 

·         double: el borde será una línea doble. La suma de las dos lineas mas el espacio entre ellas será igual a la anchura del borde (border-width).

 

·         groove: una huella de línea, linea hundida

 

·         ridge: linea resaltada (relieve)

 

·         inset: toda la caja hundida

 

·         outset: toda la caja resaltada

 

 ·border-width Puede tomar los valores

       thin : Borde fino

       médium: Borde medio

       thick: Borde grueso

 

Al igual que ocurria con margin y padding, las características se pueden agrupar:

 

   Vej  border-top: 1px solid #CFCEC6;