Box Sizing

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "box-sizing"; export const description = "Utilities for controlling how the browser should calculate an element's total size.";

<ApiTable rows={[ ["box-border", "box-sizing: border-box;"], ["box-content", "box-sizing: content-box;"], ]} />

Examples

Including borders and padding

Use the box-border utility to set an element's box-sizing to border-box, telling the browser to include the element's borders and padding when you give it a height or width.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px:

<Figure> <Example padding={false}> { <div className="relative grid w-full grid-cols-[1fr_8rem_1fr] grid-rows-[1fr_3fr_1fr] gap-px bg-gray-700/10 font-mono text-sm leading-6 font-bold dark:bg-gray-700"> <div className="col-start-1 row-start-1 bg-white dark:bg-gray-900"></div> <div className="relative col-start-2 row-start-1 bg-white dark:bg-gray-900"> <div className="absolute right-0 bottom-2 left-0 flex"> <div className="absolute top-1/2 right-0 left-0 h-px -translate-y-px bg-sky-400"></div> <div className="w-full"> <div className="absolute top-1/2 left-0 h-2 w-px -translate-x-px -translate-y-1 rounded-full bg-sky-400"></div> </div> <div className="relative flex w-full flex-auto items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-sky-600 dark:bg-gray-900 dark:text-sky-400"> 128px </div> <div className="w-full"> <div className="absolute top-1/2 right-0 h-2 w-px translate-x-px -translate-y-1 rounded-full bg-sky-400"></div> </div> </div> </div> <div className="col-start-3 row-start-1 bg-white dark:bg-gray-900"></div> <div className="relative col-start-1 row-start-2 bg-white dark:bg-gray-900"> <div className="absolute top-0 right-2 bottom-0 flex w-3"> <div className="absolute top-0 bottom-0 left-1/2 w-px -translate-x-[0.5px] bg-sky-400"></div> <div className="w-full"> <div className="absolute top-0 left-1/2 h-px w-2 -translate-x-1 -translate-y-px rounded-full bg-sky-400"></div> </div> <div className="relative flex h-3 flex-auto -translate-x-[1.15rem] translate-y-14 -rotate-90 items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-sky-600 dark:bg-gray-900 dark:text-sky-400"> 128px </div> <div className="w-full"> <div className="absolute bottom-0 left-1/2 h-px w-2 -translate-x-1 translate-y-px rounded-full bg-sky-400"></div> </div> </div> </div> <div className="col-start-2 row-start-2 size-32 bg-white ring-1 ring-sky-300 dark:bg-gray-900 dark:ring-sky-400"> <div className="relative box-border size-32 p-5 ring ring-sky-300 ring-inset"> <div className="relative z-1 h-full w-full bg-sky-500 ring-1 ring-sky-500"></div> <div className="absolute inset-0"> <Stripes className="h-full" /> </div> </div> </div> <div className="col-start-3 row-start-2 bg-white dark:bg-gray-900"></div> <div className="col-start-1 row-start-3 bg-white dark:bg-gray-900"></div> <div className="col-start-2 row-start-3 bg-white dark:bg-gray-900"></div> <div className="col-start-3 row-start-3 bg-white dark:bg-gray-900"></div> </div> } </Example> </Figure>

Tailwind makes this the default for all elements in our preflight base styles.

Excluding borders and padding

Use the box-content utility to set an element's box-sizing to content-box, telling the browser to add borders and padding on top of the element's specified width or height.

This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px:

<Figure> <Example padding={false}> { <div className="relative grid grid-cols-[1fr_8rem_1fr] grid-rows-[1fr_2fr_1fr] gap-px bg-gray-700/10 font-mono text-sm leading-6 font-bold dark:bg-gray-700"> <div className="col-start-1 row-start-1 bg-white dark:bg-gray-900"></div> <div className="relative col-start-2 row-start-1 bg-white dark:bg-gray-900"> <div className="absolute right-0 bottom-2 left-0 flex -translate-y-5"> <div className="absolute top-1/2 right-0 left-0 h-px -translate-y-px bg-blue-400"></div> <div className="w-full"> <div className="absolute top-1/2 left-0 h-2 w-px -translate-x-px -translate-y-1 rounded-full bg-blue-400"></div> </div> <div className="relative flex w-full flex-auto items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-blue-600 dark:bg-gray-900 dark:text-blue-400"> 128px </div> <div className="w-full"> <div className="absolute top-1/2 right-0 h-2 w-px translate-x-px -translate-y-1 rounded-full bg-blue-400"></div> </div> </div> </div> <div className="col-start-3 row-start-1 bg-white dark:bg-gray-900"></div> <div className="relative col-start-1 row-start-2 bg-white dark:bg-gray-900"> <div className="absolute top-0 right-2 bottom-0 flex w-3 -translate-x-5"> <div className="absolute top-0 bottom-0 left-1/2 w-px -translate-x-[0.5px] bg-blue-400"></div> <div className="w-full"> <div className="absolute top-0 left-1/2 h-px w-2 -translate-x-1 -translate-y-px rounded-full bg-blue-400"></div> </div> <div className="relative flex h-3 flex-auto -translate-x-[1.15rem] translate-y-14 -rotate-90 items-center justify-center bg-white px-1.5 font-mono text-xs leading-none font-bold text-blue-600 dark:bg-gray-900 dark:text-blue-400"> 128px </div> <div className="w-full"> <div className="absolute bottom-0 left-1/2 h-px w-2 -translate-x-1 translate-y-px rounded-full bg-blue-400"></div> </div> </div> </div> <div className="col-start-2 row-start-2 size-32 bg-white"> <div className="relative box-content size-32 -translate-x-5 -translate-y-5 p-5 ring-4 ring-blue-300 ring-inset dark:ring-blue-500"> <div className="h-full w-full bg-blue-500 ring-1 ring-blue-500"></div> <div className="absolute inset-1 z-10"> <Stripes className="h-full" /> </div> </div> </div> <div className="col-start-3 row-start-2 bg-white dark:bg-gray-900"></div> <div className="col-start-1 row-start-3 bg-white dark:bg-gray-900"></div> <div className="col-start-2 row-start-3 bg-white dark:bg-gray-900"></div> <div className="col-start-3 row-start-3 bg-white dark:bg-gray-900"></div> </div> } </Example> </Figure>

Responsive design

<ResponsiveDesign property="box-sizing" defaultClass="box-content" featuredClass="box-border" />