Para dominar CSS primero hay que comprender a la perfección el modelo de cajas de CSS. Bordes (border), relleno (padding) y márgenes (margin).

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:

Márgenes y espaciados

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:

Propiedad Valor Significado
width: auto | [tamaño] Tamaño de ancho de un elemento.
max-width: none | [tamaño] Ancho máximo que puede ocupar un elemento.
min-width: 0 | [tamaño] Ancho mínimo que puede ocupar un elemento.
height: auto | [tamaño] Tamaño de alto de un elemento.
max-height: none | [tamaño] Alto máximo que puede ocupar un elemento.
min-height: 0 | [tamaño] Alto mínimo que puede ocupar un elemento.

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:

Valor ¿Qué ocurre si se desborda el contenedor?
visible Se dibuja el contenido sobrante fuera del contenedor.
hidden Se oculta el contenido sobrante.
scroll Se colocan unas barras de desplazamiento (horizontales y verticales).
auto El navegador coloca sólo las barras de desplazamiento si son necesarias.

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:

Zonas

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.

Propiedad Valor Significado
margin-top: auto | [tamaño] Separa el elemento por arriba con un margen superior.
margin-left: auto | [tamaño] Separa el elemento por la izquierda con un margen izquierdo.
margin-right: auto | [tamaño] Separa el elemento por la derecha con un margen derecho.
margin-bottom: auto | [tamaño] Separa el elemento por abajo con un margen inferior.

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:

Propiedad Valor Significado
padding-top: 0 | [tamaño] Aplica un relleno interior en el espacio superior de un elemento.
padding-left: 0 | [tamaño] Aplica un relleno interior en el espacio izquierdo de un elemento.
padding-right: 0 | [tamaño] Aplica un relleno interior en el espacio derecho de un elemento.
padding-bottom: 0 | [tamaño] Aplica un relleno interior en el espacio inferior de un elemento.

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:

Propiedad Valores Significado
margin: [top,right,bottom,left] 1 parámetro. Aplica el mismo margen a todos los lados.
margin: [top,bottom] [left,right] 2 parámetros. Aplica margen arriba/abajo e izq/dcha.
margin: [top] [right,left] [bottom] 3 parámetros. Aplica margen arriba, izq/dcha y abajo.
margin: [top] [right] [bottom] [left] 4 parámetros. Aplica margen en cada lado, en sentido agujas del reloj.

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

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).