The snippet library.
Small, practical examples. Search by task or narrow things down below.
Add inner spacing to a content-sized box
CSS: In content-box sizing, padding adds to the declared content width.
CSS✓ Tested
Cap a box’s width
CSS: Max-width constrains an otherwise larger declared width.
CSS✓ Tested
Clip content that exceeds a fixed-height box
CSS: Overflow hidden clips the painted content while the full content remains in the DOM.
CSS✓ Tested
Enforce a minimum width
CSS: Min-width can prevent a declared smaller width from taking effect.
CSS✓ Tested
Hide an element while keeping its space
CSS: Visibility hidden preserves layout geometry even though the element is not painted.
CSS✓ Tested
Place fixed-size boxes on the same line
CSS: Inline-block allows dimensions while participating in inline layout.
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
Size a child relative to its containing block
CSS: A percentage width is based on the containing block’s available width.
CSS✓ Tested
Size a panel relative to viewport height
CSS: Viewport height units track the browser viewport rather than the parent element.
CSS✓ Tested