CSS: Anchura y altura

Las propiedades que controlan anchura y altura en CSS son width y height respectivamente.

width y height no pueden tomar valores negativos

Width (anchura)

width anchura
Descripción Establece la altura de un elemento
valores <medida> | <porcentaje> | auto | inherit
Se aplica a Todos los elementos, excepto elementos en línea que no sean imágenes, filas de tabla (tr) y grupo de filas de tabla
Valor inicial Auto

"width" representa el ancho de la caja. Pero es el ancho interior, es decir, sin bordes, márgenes, ni padding. Puede indicarse este ancho en medidas absolutas (normalmente píxeles) o relativas (normalmente %).

Aunque los elementos inline tienen width, si se modifican con CSS no se verá resultado visual alguno. Esto es porque el ancho de estos elementos se establece automáticamente para que se ajuste a las dimensiones del elemento inline.

Por ejemplo, un enlace que consista en un texto de cinco caracteres tendrá el ancho (width) fijado a esos 5 caracteres que ocupe.

Para solventar esta "carencia" los diseñadores hacen uso del “box model hack”.

HEIGHt (aLTURa)

Sobre el alto de la caja, se controla con la propiedad height; todo lo que se ha comentado sobre el width es aplicable a la altura del mismo modo.

heigth altura
Descripción Establece la altura de un elemento
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

Valores "auto" e "inherit"

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 (o altura, dependiendo si se aplica a width o a height) del elemento teniendo en cuenta sus contenidos y el sitio disponible en la página.

El valor inherit indica que la anchura (o altura, dependiendo si se aplica a width o a height) del elemento se hereda de su elemento padre.

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

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


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO