The snippet library.
Small, practical examples. Search by task or narrow things down below.
Place fixed-size boxes on the same line
CSS: Inline-block allows dimensions while participating in inline layout.
CSS✓ Tested
Position a badge relative to its container
CSS: A positioned ancestor establishes the containing block for an absolutely positioned child.
CSS✓ Tested
Position an item from the writing direction’s start edge
CSS: Logical insets follow direction, so inline-start is the right side in this RTL container.
CSS✓ Tested
Preserve an aspect ratio
Reserve a 16:9 CSS box without a fixed height.
CSS✓ Tested
Preserve line breaks while collapsing repeated spaces
CSS: Pre-line retains newlines but does not preserve all whitespace like pre-wrap does.
CSS✓ Tested
Preserve whitespace while wrapping
Use CSS pre-wrap for multiline text that retains spaces.
CSS✓ Tested
Prevent an item from shrinking
CSS: Flex-shrink zero preserves a required size even when the container overflows.
CSS✓ Tested
Provide a fallback for an unset custom property
CSS: The second var argument supplies a value when the custom property is unavailable.
CSS✓ Tested
Push flex items to opposite ends
CSS: Space-between distributes free main-axis space between items.
CSS✓ Tested
Push one flex item away from its siblings
CSS: An auto inline-start margin consumes remaining main-axis space.
CSS✓ Tested
Remove a hidden element’s layout space
CSS: Display none removes a box from layout as well as hiding its contents.
CSS✓ Tested
Reserve space for a visible border
CSS: A border adds to the outer dimensions of a content-box element.
CSS✓ Tested