Curso de CSS / anchura, altura, límites min/max y box-sizing

Las propiedades width y height establecen las dimensiones preferidas, mientras que min-width, max-width, min-height y max-height imponen límites. Con box-sizing: border-box, las dimensiones declaradas incluyen padding y bordes, pero un límite de altura todavía necesita una estrategia deliberada de overflow.

Compara content-box y border-box

Da ambas tarjetas width: 300px, 20px de relleno en cada lado y bordes de 2px. Con content-box, el contenido es de 300px y el border-box es de 344px. Con border-box, el border-box es de 300px y el contenido es de 256px. El margen está fuera del ancho declarado en ambos casos. Ver El Modelo de Caja CSS: Contenido, Relleno, Borde y Margen.

border-box mantiene el relleno y los bordes dentro del tamaño declarado. Aumentar el relleno reduce el ancho de contenido disponible y puede aumentar el salto de línea. Si el relleno y los bordes por sí solos exceden el ancho declarado, el contenido no puede volverse negativo, por lo que la caja real puede exceder ese ancho. Ver MDN: box sizing.

*, *::before, *::after { box-sizing: border-box; }

Reglas comunes que se pueden usar para unificar los métodos de cálculo en documentos nuevos. También incluimos pseudo-elementos para que se calculen de la misma manera. Si lo aplicas a páginas existentes por lotes, el diseño creado basado en el content-box puede cambiar, así que verifica primero el área requerida. El ejemplo completo aplica las reglas comunes, pero reasigna el content-box solo a .content para comparación.

Establece anchuras fluidas y límites mínimos o máximos

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% se basa en el ancho del bloque contenedor, y max-width lo limita para que no crezca más en pantallas grandes. Bajo la condición de que el tamaño de fuente raíz sea 16px, 32rem son 512px. min-width es el límite inferior de lo pequeño que puede ser. Incluso si la pantalla es más estrecha que 180px, mantener el ancho mínimo puede causar desbordamiento horizontal.

Una restricción mínima gana cuando entra en conflicto con un máximo: min-width: 360px con max-width: 320px no permite que la caja se reduzca por debajo de 360px. Las restricciones de altura correspondientes se comportan de manera similar. Los tamaños mínimos automáticos de Flexbox y Grid requieren sus propias comprobaciones; utiliza min-width: 0 cuando sea apropiado. Ver MDN: min width, MDN: min height.

Compara alturas automáticas, fijas y limitadas

Un límite de altura no elimina automáticamente el texto que se desborda. El desbordamiento predeterminado puede mostrarlo fuera del cuadro; ocultarlo puede recortar información que el lector necesita. Al combinar la altura máxima con el desplazamiento, también revise el acceso mediante teclado y la interacción en dispositivos móviles. El ejemplo completo deja espacio extra después de los cuadros para que pueda observar la falla de altura fija. Si un cuadro no se reduce como se espera, revise también CSS Desbordamiento, Ajuste de texto largo y Puntos suspensivos.

Comprende las condiciones de altura porcentual

.height-parent { height: 200px; }

.half { height: 50%; }

En el flujo de bloque normal, un elemento padre con una altura explícita de 200px permite que un hijo con height: 50% se resuelva a 100px. Si la altura del padre depende del contenido, ese cálculo simple generalmente se resuelve como auto en su lugar. Una altura mínima por sí sola no proporciona la misma condición. La posición absoluta, Flexbox y Grid pueden tener reglas diferentes para la resolución de porcentajes. Ver MDN: height.

Ejecuta el ejemplo y compara las dimensiones

Guarda el siguiente código en UTF-8 en sizing.html. Incluye dos cálculos de ancho, un límite de tamaño y una comparación de alturas con el mismo texto.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. Comprueba el ancho real de .content y .border en una ventana amplia. Son 344px y 300px respectivamente. Si solo cambias el padding del content-box a 30px, será 364px, y el ancho exterior del border-box seguirá siendo 300px incluso después del mismo cambio.
2. Reduce el ancho de la ventana para ver si .fluid se encoge con su padre. En una ventana amplia con una raíz de 16px, el máximo es 512px. Si cambias temporalmente min-width en .limits a 360px, será mayor que el max-width de 320px. Vuelve a cambiarlo a 180px.
3. Añade las mismas frases de texto a las cuatro cajas de comparación de altura. La altura fija debería desbordarse fuera de los límites, auto y min-height deberían crecer según sea necesario, y el panel de max-height debería ser legible con desplazamiento interno.
4. Elimina height: 200px del elemento padre. Verifica que la altura del 50% del hijo ya no permanezca en 100px, y restaura la declaración original para asegurarte de que vuelvan a ser 100px.
5. Aumenta el tamaño de fuente o la relación de ampliación de tu navegador. Observa si la altura fija provoca cortes o superposiciones. Compárala con auto y min-height para decidir qué opción conserva el contenido al aumentar el texto.

width: 100%, pero si se desborda horizontalmente, verifica box-sizing, márgenes izquierdo y derecho, min-width grande y cadenas largas en ese orden. No confundas el tamaño del contenido mostrado en las Herramientas de Desarrollador con el tamaño del borde. Después de cambiar el valor, vuelve a la declaración original para mantener la condición de comparación.