El modelo de cajas

Como ya hemos dicho antes, desde el punto de vista de una hoja de estilos, todo elemento html, y los elementos que lo componen son cajas

Dentro de la caja está el contenido en si mismo. Si nos fijamos en la figura, vemos que la anchura y la altura del elemento no coinciden con la anchura y la altura que luego vemos en pantalla, porque al ancho del elemento hay que añadirle luego el ancho de ”relleno” y el ancho del borde que se representan en pantalla. El margen, en cambio está fuera de la caja. El margen es la separación que hay entre el elemento y los elementos adyacentes (verticales u horizontales).

El ancho de cada uno de estos elementos – margen, borde y relleno – se establece utilizando 4 propiedades de CSS o también utilizando una sola propiedad abreviada (shorthand).

Para estos ejemplos vamos a utilizar una página sencilla que nos permita mostrar los cambios que vamos haciendo en la hoja de estilos. Aunque todavía no lo hemos visto, vamos a utilizar un fondo de color para que los cambios que vamos haciendo sean más visibles:

Ejemplo 1

Padding – El relleno de la caja

Podemos definir el relleno de una caja utilizando 4 propiedades:

Padding-left: relleno a la izquierda del contenido
Padding-right: relleno a la derecha del contenido
Padding-top: relleno encima del contenido
Padding-bottom: relleno debajo del contenido

Vamos a cambiar una de las propiedades, para ver el resultado, lo hacemos cambiando el estilo:

h1 {
background-color: #c0c0c0;
padding-left: 25px;
}

El resultado de este cambio lo podemos ver en la siguiente imagen. Si nos fijamos, vemos que el texto empieza ahora a 25 píxeles desde el borde izquierdo de la caja, con lo que tenemos 25 px de fondo gris vacío.

De la misma manera podemos rellenar los 4 lados:

h1 {
background-color: #c0c0c0;
padding-left: 25px;
padding-top: 15px;
padding-bottom: 30px;
padding-right: 20px;
}

Podemos ver los efectos en el siguiente ejemplo. Ejemplo 2

Si miramos ejemplo, podemos ver que el relleno de la parte derecha parece no haber funcionado, hemos establecido un relleno de 20px pero independientemente de lo mucho que agrandemos nuestra ventana, el área gris parece seguir alargándose indefinidamente.

Esto se debe a que el relleno derecho (padding-right) crea un espacio entre el extremo derecho del texto y el extremo derecho del encabezado, representado por la caja gris. Este relleno es difícil de ver porque el encabezado automáticamente ocupa todo el ancho de la ventana del navegador.

Una forma de verlo algo mejor es cambiando el tamaño de la ventana del navegador hasta que el texto ocupe dos líneas.

El relleno alrededor de los objetos de HTML es bastante corriente por lo que nos vendrá muy bien conocer el método abreviado que nos permite establecer varios rellenos a la vez. Para ello utilizamos ”padding” en lugar de padding left,right, etc, ponemos sólo los valores, y dependiendo de los que pongamos, significará una cosa u otra.

1 valor: Relleno en los 4 costados.

2 valores: El primer valor determina el relleno superior e inferior y el Segundo valor determina los rellenos a izquierda y derecha.

3 valores: El primer valor es el relleno superior, el segundo determina los rellenos a izquierda y derecha y el tercero establece el relleno inferior.

4 valores: El primer valor establece el relleno superior, el segundo el relleno derecho, el tercero el inferior, el cuarto el izquierdo (para acordarse, es en el sentido de las manecillas del reloj).

Veamos unos ejemplos:

Vamos a establecer los 4 bordes en una sóla línea:

<style type="text/css”>
<!--
h1 {
background-color: #c0c0c0;
padding: 15px 20px 30px 25px;
}
-->
</style>

Con el siguiente código podemos establecer los bordes superior inferior iguales y los mismo con el derecho e izquierdo:

<style type="text/css”>
<!--
h1 {
background-color: #c0c0c0;
padding: 15px 25px;
}
-->
</style>

Para crear un relleno igual en los 4 lados:

<style type="text/css”>
<!--
h1 {
background-color: #c0c0c0;
padding: 25px;
}
-->
</style>


No tenemos que usar obligatoriamente píxeles como unidades de medida también podríamos usar ”ems” o porcentajes. Ambas unidades de medida tienen efectos ligeramente distintos.

Utilizando em como medida el relleno se ajusta teniendo en cuenta el tamaño de la letra del contenido; en cambio, utilizando porcentajes el relleno se ajusta teniendo en cuenta el ancho del bloque que contiene el elemento. Lo mejor es verlo, para ello nos vamos a currar una nueva página html con más elementos de forma que podamos constatar las diferencias.

Ejemplo 3

En esta página, le hemos dado un fondo oscuro a todo el documento y hemos añadido un elemento h4 al que le hemos aplicado el mismo estilo que al h1.

Ahora vamos a cambiar la hoja de estilos para ver que pasa

body {
background-color: #808080;
}
h1, h4 {
background-color: #c0c0c0;
padding: 1em;
}

Si os fijáis en el resultado, el relleno alrededor del elemento h1 es mucho mayor pese a que el relleno que le hemos puesto es el mismo: 1 em; esto se debe a lo que hemos explicado antes que cuando utilizamos ems el espacio se calcula en función del alto de la fuente, que es mucho mayor en un encabezado de nivel 1 que en uno de nivel 4.

Ahora veamos que pasa si en lugar de utilizar ems utilizamos un porcentaje.

body {
background-color: #808080;
}

h1, h4 {
background-color: #c0c0c0;
padding: 10%;
}


Después de aplicar estos cambios, vemos que hay un gran espacio vacío alrededor del los elementos, esto se debe a que se ha aplicado un relleno del 10% del ancho de la página (el body que contiene esos elementos).

Hemos utilizado un fondo de color sólo a los efectos de que nuestros rellenos fueran más visibles, pero sin colores esto funciona igual.

Margin – Los márgenes de la caja

Los márgenes se establecen exactamente igual que los rellenos, simplemente sustituimos ”margin” por ”padding”, y todo lo demás es exactamente igual, incluido el método abreviado.

La diferencia entre los márgenes y los rellenos, es que los márgenes se sitúan fuera de la caja, en tanto que los rellenos están dentro de la caja.

Ejemplo 4

Si nos fijamos en el ejemplo, vemos que que el segundo encabezado y el párrafo a los que hemos puesto márgenes izquierdos, tienen una sangría desde el borde izquierdo del navegador. Pero en este caso, al contrario de lo que ocurría con los rellenos, se mueven hacia la derecha tanto el contenido como el fondo. Esto se debe a que tanto el color como el texto están dentro de la caja, mientras que el margen está fuera.

Ahora veamos que pasa si además de un margen, le aplicamos un relleno.

body {
background-color: #FFCCFF;
}
h1 {
background-color: #FF0099;
}
h2 {
background-color: #6699FF;
margin-left: 5%;
padding-left: 1em;
}
p {
background-color: #CC0066;
margin-left: 20px;
padding-left: 20px;
}

Si nos fijamos, vemos que ahora el el margen ha empujado los elementos html y su fondo hacia la derecha, mientras que el relleno ha empujado a la derecha sólo el texto pero dentro del fondo coloreado.

Los efectos de los márgenes horizontales son acumulativos. Veamos qué ocurre con una lista.

Ejemplo 5

Aquí la gran diferencia la vemos en la lista. Si nos fijamos en el primer item de la lista, vemos que se muestra sin ningún tipo sangría extra; lo cual es normal ya que no hemos establecido ningún margen exra para los elementos <li>. En la hoja de estilo, hemos establecido que cuando un párrafo es descendiente de un elemento <li> le asignamos un margen izquierdo del 10%. Cómo podemos ver, este margen se aplica sobre el ya existente del elemento li, por lo que el párrafo (y su fondo) se ven empujados hacia la derecha. Además, cómo se trata de un párrafo, retiene el estilo que hemos aplicado a todos los párrafos, incluido su relleno del 10%, lo que da lugar a la sangría que aparece entre el fondo coloreado y el comienzo del texto.

Si cargas en el navegador esta página, verás que el que la sangría del párrafo que está dentro de la lista, varía en función del tamaño de la ventana del navegador. Eso es porque hemos utilizado un valor relativo (20%) para el margen y un 10% para el relleno. Por tanto, ambos valores se calculan relativos al ancho del bloque que los contiene – el item li de la lista, que a su vez toma su ancho relativo al ancho de la ventana. Así cuanto más grande sea la ventana del navegador, mayor serán el margen y el relleno del párrafo anidado.

NOTA: Los navegadores gráficos, por defecto aplican un margen de 50 píxeles a la izquierda de una lista. Esto permite disponer de espacio para los marcadores de los elementos de la lista (bullets, números o lo que fuere).

Sin embargo la especificación CSS no determina de forma explícita si esto tiene que hacerse con el margen o con el relleno. Consecuencia: cada navegador lo aplica donde le da la gana.

Los navegadores basados en Mozilla (incluido Netscape 6 y posteriores) aplican un relleno por defecto a la izquierda de las listas, mientras que el resto de los navegadores (incluyendo Opera y Internet Explorer) aplican un margen. Se puede ver fácilmente esta diferencia aplicando un color de fondo a un elemento de lista. En la mayoría de los navegadores, este fondo no cubrirá los marcadores de lista, sin embargo en los navegadores basados en mozilla si lo hace.

Por esta razón, siempre que aplicas un margen o un relleno a una lista, hay que asegurarse de especificar ambos. Si aplicamos sólo un margen, la sangría por defecto permanecería en los navegadores basados en Mozilla, mientras que se anularía en el resto de navegadores. Si aplicásemos sólo un relleno, el margen por defecto de 50 píxeles permanecería en todoslos navegadores salvo Mozilla. Sólo especificando tanto el margen como el relleno (normalmente poniendo el relleno a 0 y utilizando el margen) nos podemos asegurar de que se verá igual en todos los navegadores.

También podemos especificar los márgenes verticales, lo vamos a ver con otro ejemplo:

Ejemplo 6

Si cargamos esta página en el navegador vemos que los al cambiar el tamaño de la ventana, los márgenes aumentan y disminuyen proporcionalmente, pero siguen siendo proporcionales

Los márgenes verticales en cambio, no son acumulativos Si tienes dos elementos uno encima de otro como un elemento h1 y un h2, para calcular el espacio entre ambos, se mira el margen inferior del elemento superior y el margen superior del elemento inferior y se escoge el margen mayor.

Ejemplo

h1 {
background-color: #c0c0c0;
margin-bottom: 100px;}
h2 {
background-color: #c0c0c0;
margin-bottom: 10 px;
}

El margen sera de 100 píxeles y no de 110 píxeles: no se suman sino que se escoge el mayor.

En el caso de que ambos márgenes sean iguales tampoco se suman, se aplica uno, no la suma de los dos.

Es posible utilizar valores negativos al establecer los márgenes. Esto puede resultar útil si has puesto un margen izquierdo para el body de una página y quieres que un elemento se sitúe más a la izquierda que el resto de los elementos.

Ejemplo 7

Al igual que el relleno, se puede utilizar el método abreviado para establecerlos márgenes siguiendo las mismas reglas que vimos para el padding.

Border – Los bordes de la caja

Las propiedades para establecer los bordes de la caja son algo más complejas que para el relleno y el margen, ya que éstas sólo afectan al espaciado entre objetos, en tanto que los bordes afectan además, a su apariencia. Los bordes pueden y suelen ser visibles.

Los bordes tienen 3 propiedades:

Style (estilo), que define su apariencia visual (si no se establece nada, por defecto el estilo es none – ninguno)

Width: (ancho) que determina la anchura del borde (si no establece, por defecto el ancho es médium – mediano).

Color: que determina el color del borde (si no se especifica, toma el color del elemento html al que se aplica)

El estilo del borde puede tener una serie de valores que vienen ya especificados, a continuación podemos ver una tabla con los distintos bordes posibles y los navegadores que soportan cada uno de ellos.

Todos los navegadores que sorportan css admiten:

Double
Groove
Inset
None
Outset
Ridge
Solid

Netscape 6, Mozilla, IE 5.5/win, IE4 Mac admiten además:

Dashed
Dotted
Hidden

Para hacer pruebas con los bordes, puedes utilizar este test.

El valor hidden tiene el mismo efecto que no, excepto cuando lo aplicamos a una tabla de disposición.

Las especificaciones de la W3C dejan el tema de la apariencia concreta de estos bordes al libre albedrío de los navegadores, por lo que no debe sorprendernos si los bordes aparecen ligeramente distintos en los diferentes navegadores y plataformas.

El ancho del borde alrededor de un elemento puede establecerse uno por uno estableciendo individualmente cada propiedad con: border-top-width; border-right-width, border-bottom-width y border-left-width. Pueden utilizarse pixels, ems o una de los tres valores de tipo decriptivo: thin (delgado) médium (medio) o thick (grueso). Si utilizamos estos valores, el resultado final dependerá de cada navegador aunque el comportamiento es bastante homogéneo. Si quieres controlar perfectamente las medidas de los bordes es conveniente utilizar pixels.

Puedes también controlar el color de cada uno de los 4 bordes por separado: border-top-color, border-right-color, border-bottom-color y border-left-color.

Los métodos abreviados de border-style, border-width y border-color admiten valores múltiples tal y cómo lo veíamos en los métodos abreviados de los rellenos, aunque netscape 4 no reconoce estos valores múltiples en el caso de los estilos y los colores.

Hay un método abreviado adicional que es probablemente el más utilizado a la hora de definir los bordes: puedes especificar el ancho, el color y el estilo en una sola línea. Se utiliza mucho ya que lo más normal suele ser un borde uniforme:

Border: 5px double red;

Con eso tendríamos un borde uniforme doble y de color rojo.

Volver al índice