Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; background-color: #f0f0f0; }
.item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border-radius: 5px; }The 'gap' property in CSS is used to define the spacing between items in a grid or flex container. It allows for more control over the layout by setting the space between rows and columns without needing to add margins to individual items. This property enhances the visual arrangement of elements, making it easier to create clean and organized layouts.
.container { text-align: center; margin-top: 50px; }
.normal { font-weight: normal; font-size: 24px; }
.bold { font-weight: bold; font-size: 24px; }
.bolder { font-weight: bolder; font-size: 24px; }The 'font-weight' property in CSS is used to define the thickness or boldness of the text. It allows you to specify different levels of boldness, ranging from normal (400) to bold (700) and even bolder weights, depending on the font family used. This property is essential for creating emphasis and visual hierarchy in text content.
.example { font-variant-position: super; }The 'font-variant-position' CSS property controls the alignment of the small-caps and normal text at the same baseline. It allows you to specify whether the small-caps glyphs should sit on the normal baseline or be aligned to the caps height.
.numeric-example { font-variant-numeric: lining-nums; }The 'font-variant-numeric' CSS property allows you to control the numerical formatting of text, such as enabling or disabling the use of lining and old-style numerals.
.ligatures { font-variant-ligatures: common-ligatures; }The 'font-variant-ligatures' property controls the usage of ligatures in text. Ligatures are the combination of two or more characters into a single character for better typographic design. By using this property, you can enable or disable ligatures in text.