Lección 12: Altura y anchura

Hasta ahora, no hemos prestado demasiada atención a las dimensiones de los elementos con los que hemos estado trabajando. En esta lección examinaremos lo fácil que es definir la altura y anchura de un elemento. Para lo cual usaremos las propiedades:

• width
• height

Estableciendo la propiedad width

Con la propiedad width se puede definir la anchura concreta de un elemento.

El sencillo ejemplo que sigue nos proporciona una caja en la que se puede introducir texto:

div.box { width: 200px; border: 1px solid black; background: orange; }

Estableciendo la propiedad height

Fíjate cómo en el ejemplo anterior la altura de la caja queda establecida por el contenido de la misma. Se puede influir en la altura de un elemento con la propiedad height. Por ejemplo, probemos a fijar la altura de la caja en 500px:

div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

Resumen

La lección 9, 10, 11 y 12 han servido para presentarte el modelo de caja en CSS. Como probablemente imaginarás, el modelo de caja te ofrece muchas opciones nuevas. Es probable que, hasta este momento, hayas estado usando tablas de HTML para crear la presentación de tus documentos; con CSS y el modelo de caja ya deberías de ser capaz de lograr elegantes presentaciones con mayor precisión y conformes con las recomendaciones del W3C.