Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.letter-spacing-example { font-size: 40px; letter-spacing: 5px; color: #333; text-align: center; margin-top: 50px; }The 'letter-spacing' CSS property controls the spacing between characters in text. By adjusting this spacing, you can enhance readability, create a specific aesthetic effect, or adjust the overall appearance of typography. Increasing the letter spacing can make text appear more open and airy, while decreasing it can create a more compact look.
.container { position: relative; width: 300px; height: 200px; border: 2px solid #000; } .box { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background-color: lightblue; border: 2px solid #007BFF; }The 'left' CSS property specifies the position of an element in relation to its nearest positioned ancestor. It is used in conjunction with positioning properties like 'absolute', 'relative', or 'fixed' to move an element horizontally from the left edge of its containing block.
.container { display: flex; justify-content: space-between; background-color: #f0f0f0; padding: 20px; } .item { background-color: #4CAF50; color: white; padding: 10px; margin: 5px; border-radius: 5px; }The 'justify-content' property in CSS is used to align flex items along the main axis of a flex container. It helps distribute space between items and can control their alignment in various ways, such as centering them, spacing them out evenly, or aligning them to one end.
.container { position: relative; width: 300px; height: 200px; } .background { background-color: rgba(255, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .foreground { isolation: isolate; background-color: rgba(0, 255, 0, 0.8); padding: 20px; position: relative; z-index: 1; }The CSS 'isolation' property controls the blending context of an element. When set to 'isolate', it creates a new stacking context, which can help in managing overlapping elements and their visual effects, particularly when using opacity or mix-blend-mode. This property is useful for ensuring that certain elements are visually distinct from others in terms of rendering and interactions.
.container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .box { width: 200px; height: 100px; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; position: relative; inset-inline-start: 50px; margin-inline-start: 50px; }The 'inset-inline-start' CSS property defines the distance between the inline start edge of an element and its containing block. This property is particularly useful for creating responsive layouts that adapt to different text directions, such as left-to-right or right-to-left. By adjusting the 'inset-inline-start', you can control the positioning of elements in a way that respects the writing mode of the document.