Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { border: 2px solid #4CAF50; padding: 20px; } .title { color: #4CAF50; } .description { font-size: 16px; }The CSS 'padding' property creates space between the content of an element and its border. It can be applied to all four sides of an element (top, right, bottom, left) and helps improve the layout and readability of content by providing breathing room.
.container {
width: 300px;
height: 100px;
overflow: hidden;
border: 2px solid #333;
}
.scrollable {
display: flex;
width: 600px;
height: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
background-color: #f0f0f0;
}
.item {
min-width: 100px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #666;
background-color: #cce5ff;
margin-right: 10px;
}The 'overscroll-behavior-inline' CSS property controls the behavior of scrolling in a container when it reaches the boundary of its scrollable area. By setting this property, you can prevent the default scroll chaining behavior and manage how the scroll interacts with the viewport or other scrollable areas. This is particularly useful in creating a smoother user experience when dealing with horizontally scrollable content.
.container { height: 200px; width: 300px; border: 2px solid #333; overflow: hidden; }
.scrollable { height: 400px; overflow-y: scroll; overscroll-behavior: contain; overscroll-behavior-block: contain; background-color: #f0f0f0; padding: 10px; }The 'overscroll-behavior-block' CSS property controls the behavior of scrolling when reaching the boundary of a scroll container in the block direction (vertical). By setting this property, you can prevent the scroll from propagating to the parent element, which can enhance user experience by keeping the focus within a specific content area.
.container { height: 200px; width: 300px; overflow: auto; border: 2px solid #333; overscroll-behavior: contain; } .inner { height: 600px; width: 100%; background: linear-gradient(to bottom, #ffcc00, #ff6699); }The 'overscroll-behavior' CSS property controls the behavior of a container when it reaches the boundary of its scrollable area. It can prevent the default scroll chaining behavior, allowing for better control over scrolling in nested scrollable elements. This is particularly useful for improving user experience in mobile applications.
.container { width: 300px; height: 150px; border: 1px solid #000; overflow-y: scroll; padding: 10px; }The 'overflow-y' CSS property controls the vertical overflow of content within an element. It determines how content that exceeds the height of its container is handled, allowing for options like scrolling, hidden content, or visible overflow. This property is particularly useful for creating scrollable areas in web layouts.