Anchura
La propiedad CSS que controla la anchura de los elementos se denomina width.
| width | Anchura |
|---|---|
| Valores | <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.
Altura
La propiedad CSS que controla la altura de los elementos se denomina height.
| height | Altura |
|---|---|
| Valores | <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.