Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { background-color: lightblue; padding: 20px; } .title { padding-block-start: 30px; font-size: 24px; } .description { font-size: 16px; }The 'padding-block-start' CSS property sets the padding space at the start of a block container, which is the top side in a vertical writing mode. This property is particularly useful for creating consistent spacing in layouts, especially in responsive designs where the writing direction may change.
.container {
background-color: #f0f0f0;
border: 2px solid #ccc;
width: 300px;
margin: 20px auto;
text-align: center;
}
.title {
margin: 0;
padding-block-end: 20px;
color: #333;
}
.description {
margin: 0;
padding: 10px;
color: #666;
}The 'padding-block-end' CSS property sets the padding area on the end side of a block container. This property is particularly useful for controlling the layout in a way that respects the writing mode of the content, allowing for more responsive designs. By using this property, you can ensure that the spacing at the end of a block element is consistent, regardless of the text direction.
.container { background-color: #f0f0f0; text-align: center; padding: 20px; } .title { font-size: 2em; color: #333; padding-block: 20px; } .description { font-size: 1.2em; color: #666; }The 'padding-block' CSS property is a shorthand for setting the padding on the block-start and block-end sides of an element, which corresponds to the top and bottom padding in a vertical writing mode. This property is particularly useful for creating responsive designs that adapt to different writing modes and screen orientations.
.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.