new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

padding

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Padding utility class prefixes and CSS properties

Tailwind padding utilities use the following prefixes and map to these CSS properties: p (padding), px (padding-inline), py (padding-block), ps (padding-inline-start), pe (padding-inline-end), pbs (padding-block-start), pbe (padding-block-end), pt (padding-top), pr (padding-right), pb (padding-bottom), pl (padding-left).

Padding utility syntax variants

For each padding prefix, four syntax variants are available: prefix-<number> (applies calc(var(--spacing) * <number>)), prefix-px (applies 1px), prefix-(<custom-property>) (applies var(<custom-property>)), and prefix-[<value>] (applies arbitrary <value>).

Basic padding with p utility

Use p-<number> utilities such as p-4 and p-8 to control padding on all sides of an element.

Single-side padding utilities

Use pt-<number>, pr-<number>, pb-<number>, and pl-<number> utilities to control padding on individual sides: top, right, bottom, or left respectively.

Horizontal padding with px utility

Use px-<number> utilities such as px-4 and px-8 to control horizontal padding (left and right) of an element.

Vertical padding with py utility

Use py-<number> utilities such as py-4 and py-8 to control vertical padding (top and bottom) of an element.

Logical padding properties for text direction

Use ps-<number> and pe-<number> utilities to set padding-inline-start and padding-inline-end logical properties, which map to left or right side based on text direction. Use pbs-<number> and pbe-<number> utilities to set padding-block-start and padding-block-end logical properties, which map to top or bottom based on writing mode.

Custom values with padding utilities

Padding utilities support arbitrary custom values using the bracket syntax: p-[<value>], px-[<value>], pb-[<value>], and other variants.

Responsive padding design

Padding utilities support responsive design breakpoints, allowing different padding values at different screen sizes.

Customizing padding theme

The padding spacing scale can be customized in the theme configuration. The customizable padding utilities are: p, px, py, ps, pe, pbs, pbe, pt, pr, pb, pl.

Give your agent this brain