box-sizing

Ejemplos

Incluir bordes y padding

Utiliza la utilidad box-border para establecer el box-sizing de un elemento a border-box, lo que le indica al navegador que incluya los bordes y el padding del elemento cuando le asignes una altura o ancho.

Esto significa que un elemento de 100px × 100px con un borde de 2px y 4px de padding en todos los lados se renderizará como 100px × 100px, con un área de contenido interna de 88px × 88px:

<div class="box-border size-32 border-4 p-4 ...">  <!-- ... --></div>

Tailwind hace que esto sea el valor predeterminado para todos los elementos en nuestros estilos base de preflight.

Excluir bordes y padding

Utiliza la utilidad box-content para establecer el box-sizing de un elemento a content-box, lo que le indica al navegador que agregue los bordes y el padding además del ancho o la altura especificados del elemento.

Esto significa que un elemento de 100px × 100px con un borde de 2px y 4px de padding en todos los lados se renderizará en realidad como 112px × 112px, con un área de contenido interna de 100px × 100px:

<div class="box-content size-32 border-4 p-4 ...">  <!-- ... --></div>

Diseño responsivo

Antepone a la utilidad box-sizing el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="box-content md:box-border ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.