Ver índice de contenidos del libro

4.1. Anchura y altura

4.1.1. Anchura

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

Propiedad width
Valores unidad de medida | porcentaje | auto | inherit
Se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla
Valor inicial auto
Descripción Establece la anchura de un elemento

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }
 
<div id="lateral">
  ...
</div>

CSS define otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width, que se verán más adelante.

4.1.2. Altura

La propiedad CSS que controla la altura de los elementos se denomina height.

Propiedad height
Valores unidad de medida | porcentaje | auto | inherit
Se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla
Valor inicial auto
Descripción Establece la altura de un elemento

Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:

#cabecera { height: 60px; }
 
<div id="cabecera">
  ...
</div>

CSS define otras dos propiedades relacionadas con la altura de los elementos: min-height y max-height, que se verán más adelante.