Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container {\n height: 200vh; // Make the container tall for scrolling\n padding: 20px;\n} \n\nh2 {\n scroll-margin-block: 100px; // Creates a margin of 100px above and below the headings when scrolled into view\n margin-top: 50px;\n padding: 10px;\n background-color: lightblue;\n} \n\np {\n margin: 20px 0;\n}The 'scroll-margin-block' property in CSS defines the margin that will be applied to the block-start and block-end of an element when it is scrolled into view. This is particularly useful for controlling the position of an element when navigating through a long page with anchors, ensuring that it doesn't get too close to the edges of the viewport. It enhances the user experience by providing better visual spacing around the element upon scroll.
.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.