Dimensiones en CSS: width y height

Las propiedades width (ancho) y height (alto) en CSS son fundamentales para definir las dimensiones de los elementos en una página web. Estas propiedades permiten establecer el tamaño del área de contenido de un elemento, controlando así su aspecto y disposición en la página.

1. Propiedad width

La propiedad width define el ancho del contenido de un elemento. Este ancho no incluye el padding, border, ni el margin del elemento.

• Sintaxis:

selector {
    width: valor;
}

Valores Comunes:

• Píxeles (px): Medida absoluta (e.g., width: 300px;).
• Porcentaje (%): Relativo al elemento contenedor (e.g., width: 50%;).
• Auto (auto): El ancho se ajusta automáticamente según el contenido y el contenedor.

Ejemplo:

.caja {
    width: 50%; /* La caja ocupará el 50% del ancho del contenedor padre */
}

2. Propiedad height

La propiedad height define la altura del contenido de un elemento. Al igual que width, esta altura no incluye el padding, border, ni el margin.

• Sintaxis:

selector {
    height: valor;
}

Valores Comunes:

• Píxeles (px): Medida absoluta (e.g., height: 200px;).
• Porcentaje (%): Relativo al elemento contenedor (e.g., height: 100%;).
• Auto (auto): La altura se ajusta automáticamente según el contenido.

Ejemplo:

.caja {
    height: 300px; /* La caja tendrá una altura fija de 300px */
}

3. Ajustes Automáticos con auto

El valor auto permite que las dimensiones de un elemento se ajusten automáticamente en función del contenido y del contexto del contenedor.

• Ejemplo:

.contenido {
    width: auto; /* El ancho se ajustará según el contenido */
    height: auto; /* La altura se ajustará según el contenido */
}

4. Unidades Relativas y Absolutas

• Unidades Absolutas:
  • Píxeles (px): Especifica un tamaño fijo que no varía con el tamaño del viewport o del contenedor.
• Unidades Relativas:
  • Porcentaje (%): Se calcula en relación con las dimensiones del elemento contenedor padre.
  • Viewport Width (vw): Relativo al ancho de la ventana gráfica (e.g., 50vw es el 50% del ancho del viewport).
  • Viewport Height (vh): Relativo a la altura de la ventana gráfica (e.g., 100vh es el 100% de la altura del viewport).

5. Máximo y Mínimo Tamaño

CSS también ofrece propiedades para establecer límites en las dimensiones de los elementos:

• max-width: Define el ancho máximo permitido.
• min-width: Define el ancho mínimo permitido.
• max-height: Define la altura máxima permitida.
• min-height: Define la altura mínima permitida.
• Ejemplo:

.caja-responsiva {
    width: 100%;
    max-width: 600px; /* El ancho no superará los 600px */
    height: auto;
}

6. Ejemplo Completo

.caja {
    width: 80%;           /* 80% del contenedor padre */
    max-width: 600px;     /* Máximo de 600px de ancho */
    height: 400px;        /* Altura fija de 400px */
    padding: 20px;        /* Espaciado interno */
    border: 2px solid #333; /* Borde de 2px */
    margin: 0 auto;       /* Centrado horizontal */
}

Este código define una caja que ocupará el 80% del ancho del contenedor padre, pero no excederá los 600px. La altura de la caja será de 400px, con un padding de 20px alrededor del contenido, y un margen automático para centrarla horizontalmente.