Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 20px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border: 2px solid #fff;
margin: 5px;
}The 'row-gap' property in CSS is used to define the vertical spacing between rows in a grid or flex container. It allows for better control over the layout of elements, ensuring that there's adequate space between them without affecting their individual margins.
.container { position: relative; width: 300px; height: 200px; border: 1px solid #000; } .box { position: absolute; right: 20px; top: 50px; width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; }The 'right' CSS property specifies the position of an element's right edge in relation to its containing block. It is commonly used in conjunction with positioning properties like 'absolute' or 'relative' to control the horizontal placement of an element. By setting the 'right' property, you can effectively move an element towards the left or right side of its container.
.resizable-box { width: 200px; height: 100px; border: 2px solid #007BFF; padding: 10px; resize: both; overflow: auto; }The CSS 'resize' property allows you to control the resizability of an element. By applying this property, you can enable users to resize elements like textareas and divs in a web page. It can take values such as 'both', 'horizontal', 'vertical', or 'none' to specify the direction in which an element can be resized.
:root { quotes: '"“" "”"'; } .quote { font-size: 24px; font-style: italic; } .quote::before { content: open-quote; } .quote::after { content: close-quote; }The CSS 'quotes' property allows you to specify the type of quotation marks to be used for the content of the 'content' property when using the '::before' and '::after' pseudo-elements. This can enhance the visual presentation of quoted text in a web document. By defining custom quotes, you can ensure consistency and style across your web pages.
.container {
position: relative;
width: 300px;
height: 300px;
border: 2px solid #000;
margin: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
text-align: center;
line-height: 100px;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
background-color: coral;
}The 'position' property in CSS specifies how an element is positioned in the document. It can take values such as 'static', 'relative', 'absolute', 'fixed', and 'sticky', which determine the element's placement and movement relative to its normal position or the viewport.