Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
.spacer {
height: 100px;
background-color: #f0f0f0;
margin: 10px 0;
}
.target {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
scroll-margin-top: 50px;
}The 'scroll-margin' property in CSS defines the margin around an element when it is scrolled into view. This property is particularly useful for controlling the positioning of elements within a scrollable container, ensuring that they appear with the desired spacing when the user navigates to them. It can enhance usability by preventing elements from being too close to the viewport edge when they come into focus.
html {
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
background: white;
padding: 10px;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.content {
margin-top: 60px;
}
.section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
background-color: lightcoral;
border: 1px solid #ccc;
}The 'scroll-behavior' CSS property allows you to control the scrolling behavior of a webpage when navigating to anchor links. By setting it to 'smooth', you can create a smooth scrolling effect instead of a sudden jump, enhancing the user experience when navigating long pages.
.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.