CSS3 03 Modelo de Cajas

 CSS3 03 Modelo de Cajas

Durante varios años, el denominado modelo de cajas fue una pesadilla para los desarrolladores web, puesto que se trataba de forma diferente en Internet Explorer y los demás navegadores. Por fortuna, todos los navegadores actuales ya interpretan de la misma forma el modelo de cajas.

La representación básica del modelo de cajas es el siguiente:

Dimensiones

Para dar tamaños específicos a los diferentes elementos de un documento HTML, necesitaremos asignarles valores a las propiedades width (ancho) y height (alto). Además, ambas tienen propiedades hermanas para establecer el tamaño máximo y mínimo que pueden alcanzar:

En el caso de utilizar el valor auto en las propiedades anteriores, el navegador se encarga de calcular el ancho o alto necesario, dependiendo del contenido del elemento. Las propiedades min-width y min-height, por defecto tienen valor 0, mientras que las propiedades max-width y max-height, por defecto tienen valor none.

Desbordamiento del contenido

Antes de finalizar este apartado, pensemos en la siguiente situación: Damos un tamaño de ancho y alto a un elemento HTML, pero su contenido es tan grande que no cabe dentro de ese elemento. ¿Qué ocurriría? Todo depende de lo que se haya especificado en la propiedad overflow:

     

Nota: CSS3 añade las propiedades overflow-x y overflow-y, que hacen lo mismo, solo que respecto a los lados izquierdo/derecho y arriba/abajo respectivamente.

Zonas de un elemento

Antes de continuar, es importante saber que en CSS existen ciertas palabras clave hacer referencia a una zona u orientación concreta sobre un elemento. Son conceptos muy sencillos y prácticamente lógicos, por lo que no tendrás ningún problema en comprenderlos. Son los siguientes:

- Top: Se refiere a la parte superior del elemento.

- Left: Se refiere a la parte izquierda del elemento.

- Right: Se refiere a la parte derecha del elemento.

- Bottom: Se refiere a la parte inferior del elemento.

- Center: En algunos casos se puede especificar el valor center para referirse a la posición central entre dos extremos.

Estas palabras clave las utilizaremos muy a menudo en diferentes propiedades CSS para hacer referencia a una zona particular.

Márgenes y espaciados

Los márgenes (margin) son los espacios que hay entre los bordes del elemento en cuestión y los elementos externos.

Podemos aplicar diferentes márgenes a cada zona de un elemento utilizando cada una de estas propiedades, o dejando al nevegador que lo haga de forma automática indicando el valor auto.

Truco: Existe un truco muy sencillo y práctico para centrar un elemento en pantalla. Basta con aplicar un ancho fijo al contenedor (width:500px, por ejemplo) y luego aplicar un margin:auto. De esta forma, el navegador, al conocer el tamaño del elemento (y por omisión, el resto del tamaño de la ventana) se encarga de repartirlo equitativamente entre el margen izquierdo y el margen derecho, quedando centrado el elemento.

Hay que diferenciar bien los márgenes de los espaciados, puesto que no son la misma cosa. Los espaciados (padding) son los espacios que hay entre los bordes del elemento en cuestión y el contenido del elemento. Mientras que los márgenes (margin) son los espacios que hay entre los bordes del elemento en cuestión y sus elementos adyacentes.

Al igual que con los márgenes, los espaciados tiene varias propiedades para indicar cada zona:

Como se puede ver en la tabla, por defecto no hay relleno (el relleno está a cero), aunque puede modificarse tanto con las propiedades anteriores como la propiedad de atajo siguiente.

Atajo: Márgenes y espaciados

Al igual que en otras propiedades de CSS, también existen atajos para los márgenes y los espaciados:

   

Con las propiedades padding y border-width pasa exactamente lo mismo, actuando en relación a los espaciados, en lugar de los márgenes en el primer caso, y en relación al grosor del borde de un elemento en el segundo.

Ojo: Aunque al principio es muy tentador utilizar márgenes negativos para ajustar posiciones que no se muestran cómo queremos, se aconseja no utilizar dicha estrategia, ya que a la larga es una mala práctica que hará que nuestro código sea de peor calidad.