Modelo de cajas

Durante varios años, el denominado modelo de cajas fue una pesadilla para los desarrolladores web, puesto que se mostraba visualmente de forma diferente en Internet Explorer respecto a los demás navegadores. Por fortuna, todos los navegadores actuales ya interpretan de la misma forma el modelo de cajas, pero conviene aprender bien la diferencia para no ser como Internet Explorer.

La representación básica del modelo de cajas es la siguiente, donde podemos observar varios conceptos importantes a diferenciar:

• El borde (border). En negro, es el límite que separa el interior del exterior del elemento.
• El márgen (margin). En naranja, es la parte exterior del elemento, por fuera del borde.
• El relleno (padding). En verde, es la parte interior del elemento, entre el contenido y el borde.
• El contenido (en azul). En azul, es la parte interior del elemento, excluyendo el relleno.

Dimensiones (ancho y alto)

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).

En el caso de utilizar el valor auto en las propiedades anteriores (que es lo mismo que no indicarlas, ya que es el valor que tienen por defecto), el navegador se encarga de calcular el ancho o alto necesario, dependiendo del contenido del elemento. Esto es algo que también puede variar, dependiendo del tipo de elemento que estemos usando, y que veremos más adelante, en el apartado de maquetación.

Hay que ser muy conscientes de que, sin indicar valores de ancho y alto para la caja, el elemento generalmente toma el tamaño que debe respecto a su contenido, mientras que si indicamos un ancho y alto concretos, estamos obligando a CSS tener un aspecto concreto y podemos obtener resultados similares al siguiente (conocida broma de CSS) si su contenido es más grande que el tamaño que hemos definido:

Otra forma de lidiar con esto, es utilizar las propiedades hermanas de width: min-width y max-width y las propiedades hermanas de height: min-height y max-height. Con estas propiedades, en lugar de establecer un tamaño fijo, establecemos unos máximos y unos mínimos, donde el ancho o alto podría variar entre esos valores.

div {
  width: 800px;
  height: 400px;
  background: red;
  max-width: 500px;
}

En este caso, por ejemplo, a pesar de estar indicando un tamaño de 800px, le aplicamos un max-width de 500px, por lo que estamos limitando el elemento a un tamaño de ancho de 500 píxeles como máximo y nunca superará ese tamaño.

Por un lado tenemos las propiedades de mínimos min-width y min-height, que por defecto tienen valor 0, mientras que por otro lado, tenemos las propiedades de máximos max-width y max-height, que por defecto tienen valor none:

Zonas de un elemento

Antes de continuar, es importante saber que en CSS existen ciertas palabras clave para 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 los extremos horizontales o verticales.

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

Desbordamiento

Volvamos a pensar en la situación de la imagen anterior: Damos un tamaño de ancho y alto a un elemento HTML, pero su contenido de texto es tan grande que no cabe dentro de ese elemento. ¿Qué ocurriría? Probablemente lo que vimos en la imagen: el contenido se desbordaría.

Podemos modificar ese comportamiento con la propiedad de CSS overflow, o con alguna de sus propiedades específicas overflow-x o overflow-y:

Dichas propiedades pueden tomar varios valores, donde visible es el valor que tiene por defecto, que permite que haya desbordamiento. Otras opciones son las siguientes, donde no se permite desbordamiento:

Nota: CSS3 añade las propiedades overflow-x y overflow-y para cada eje individual, que antiguamente solo era posible hacerlo con overflow para ambos ejes. Estas propiedades son útiles cuando no quieres mostrar alguna barra de desplazamiento, habitualmente, la barra de desplazamiento horizontal.