Cajas en CSS: Ancho, alto y marco

Para terminar esta sección acerca de las cajas en CSS, necesitamos hablar acerca de su ancho, alto y marcos.

El lenguaje CSS incluye las siguientes instrucciones para tratar con ellos:

height
min-height
max-height
width
min-width
max-width
outline-color
outline-style
outline-width
outline

Con height, se especifica el alto exacto que un elemento tendrá en una página web; y con min-height y max-height, sus alturas mínima y máxima, respectivamente. Del mismo modo, con width, se especifica el ancho exacto de un elemento en una página web; y con min-width y max-width, sus anchos mínimos y máximos, respectivamente. Por último, aunque outline no muestre nada en el navegador Internet Explorer, con outline-color, outline-style y outline-width, o su abreviatura, outline, se puede especificar la imagen de un elemento específico, tal como se hace con border para las instrucciones para cajas en CSS.

Hay dos cosas extra que aprender: La primera es que estas instrucciones en general no aceptan porcentajes como unidades. La segunda es que se pueden especificar dos de estas instrucciones a para un mismo elemento, pero solo si se utilizan unidades de medida diferentes.

Ejemplos

Si se desea que un párrafo tenga una altura mínima de 50 píxeles, se escribe:

min-height: 50px;

Si se desea que un párrafo tenga una altura máxima de 120 píxeles, se escribe:

max-height: 120px;

Si se desea que un elemento tenga cierta altura, pero se teme que el usuario se pierda de algo si cambian su tamaño de texto, se pueden usar dos instrucciones CSS:

min-height: 80px;
height: 2.4em;

Funciona igual con width (ancho).

Outline dibuja un marco alrededor del elemento, pero no funciona con Internet Explorer.

outline: blue ridge 2px;

mostrará un marco de 2 píxeles de ancho, de color azul, ribeteado alrededor del elemento en el que se haya asignado esta instrucción.

Conocimiento + Computadores