Cuando hablamos del modelo de cajas en CSS, estamos haciendo referencia a un sistema que tiene el navegador de interpretar las diferentes partes de lo que solemos denominar «caja»: un elemento HTML con unas ciertas dimensiones.
La representación básica del modelo de cajas se basa en varios conceptos importantes, como veremos a continuación:
Como veremos, cada una de estas partes del modelo de cajas de CSS se puede alterar, cambiando sus dimensiones, colores, etc. Así pues, cada elemento HTML tendrá su propio borde, margen, relleno y contenido.
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):
Propiedad | Valor | Significado |
---|---|---|
width |
auto | |
Tamaño de ancho de un elemento. |
height |
auto | |
Tamaño de alto de un elemento. |
En el caso de indicar el valor auto
a dichas propiedades, el navegador se encargará de darle el tamaño apropiado, dependiendo de su contenido. Ten en cuenta que este valor es el que tienen por defecto estas propiedades. De no indicar un valor concreto, width
y height
tienen establecido el valor auto
.
Es importante recalcar que el tamaño automático dado a un elemento depende del tipo de elemento (bloque, en línea...). Este tema lo veremos en un capítulo posterior.
Hay que ser muy conscientes de que, sin indicar valores de ancho y alto para una 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 mediante CSS a 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 obligado a tener:
Otra forma de lidiar con esto, es utilizar las propiedades hermanas de width: por un lado, min-width
y max-width
y por otro, sus equivalentes de height: min-height
y max-height
.
Propiedad | Valor | Significado |
---|---|---|
max-width |
none | |
Ancho máximo que puede ocupar un elemento. |
min-width |
0 | |
Ancho mínimo que puede ocupar un elemento. |
max-height |
none | |
Alto máximo que puede ocupar un elemento. |
min-height |
0 | |
Alto mínimo que puede ocupar un elemento. |
Con estas propiedades, en lugar de establecer un tamaño fijo, establecemos unos rangos máximos y 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.
Ojo: Las propiedades de mínimos
min-width
ymin-height
por defecto tienen valor 0, mientras que las propiedades de máximosmax-width
ymax-height
, tienen por defecto valor none.
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:
Palabra clave | Descripción |
---|---|
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 refiere 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 del elemento.
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
:
Propiedad | Valor | Significado |
---|---|---|
overflow-x |
visible | hidden | scroll | auto | Establece el desbordamiento del eje X (horizontal). |
overflow-y |
visible | hidden | scroll | auto | Establece el desbordamiento del eje Y (vertical). |
overflow |
overflow-x overflow-y | Propiedad de atajo que establece desbordamiento de ambos ejes. |
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:
Valor | ¿Qué ocurre si se desborda el contenedor? | ¿Desbordamiento? |
---|---|---|
visible | Se muestra el contenido que sobresale (comportamiento por defecto) | Sí |
hidden | Se oculta el contenido que sobresale. | No |
scroll | Se colocan barras de desplazamiento (horizontales y verticales). | No |
auto | Se colocan barras de desplazamiento (sólo las necesarias). | No |
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.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev