En el anterior capítulo finalizamos las propiedades CSS típicas de visualización. Ahora hablaremos de las propiedades de capa, que son esos estilos que afectan directamente al formato que tendrá nuestra capa, es decir tamaños, márgenes, relleno, bordes, perfiles o fondos.

Height
La propiedad height establece la altura de nuestra capa mediante una medida.  Esta altura evidentemente nunca puede ser negativa y no funciona en los elementos en linea que no sean imágenes (no podemos dar, por ejemplo, una altura a una linea de texto).

Nota: Utilizar porcentajes % para definir la altura no es tan sencillo como usarlos para definir la anchura, pues cuando intentamos establecer una  altura de capa mediante un porcentaje, se toma como referencia la altura del elemento que lo contiene, pues si no tiene establecida una altura se ignora la altura en porcentaje y se sustituye por el valor auto.

La propiedad height marca la altura de cada elemento independientemente de los márgenes, bordes o rellenos  que se sumarían de forma que la altura total será diferente a la definida inicialmente.

Width
La propiedad width establece la anchura de nuestra capa mediante una medida. Para los elementos de bloque (div), como ya dijimos usan todo el ancho posible, de forma que establecer una anchura hará que solo se use el ancho definido, pero el elemento seguirá siendo un elemento de bloque, de forma que el siguiente elemento no se pondría al lado, sino justo debajo.

Al igual que pasaba en el caso del height, esta propiedad no funciona en los elementos en linea que no sean imágenes, tampoco funciona con valores negativos y los márgenes, bordes o rellenos aumentan el tamaño inicial definido.

Max-height / Min-height
Estas dos propiedades nos permiten establecer una altura máxima y una altura mínima para nuestra capa. Esto nos puede venir muy bien para crear, por ejemplo, tarjetas de una misma altura independientemente de su contenido.
Pero no es oro todo lo que reluce y como siempre IE en versiones 6 o anteriores no reconocen esta propiedad con lo que nos veremos obligados a usar algunos trucos para el perfecto visualizado en estos navegadores:

max-height: 300px;
height: expression(this.scrollHeight > 301? “300px”:”auto);”

min-height:150px;
height: expression(this.scrollHeight < 151? “150px”:”auto);”

La función expression es solo reconocida por el navegador IE y nos servirá para simular este efecto, aunque debemos saber que esta propiedad no está validada por la W3C.

Max-width / Min-width
Propiedades muy poco usadas. Gracias a estas propiedades podremos establecer una anchura máxima o una anchura mínima para nuestra capa. De esta forma aunque el contenido de nuestra capa no tenga el tamaño que deseemos, podemos forzar a que nuestra capa si disponga de ese tamaño.

Al igual que en el anterior caso, IE no reconoce estas expresiones y deberemos usar de nuevo un truco que, evidentemente, no valida.

max-width: 300px;
height: expression(document.body.clientWidth > 301? “300px”:”auto);”

min-width:150px;
height: expression(document.body.clientWidth< 151? “150px”:”auto);”