Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { background-color: #f0f0f0; padding: 20px; border: 2px solid #ccc; } .title { color: #333; } .description { padding-bottom: 30px; color: #666; } .extra { color: #999; }The 'padding-bottom' property in CSS is used to create space between the content of an element and its bottom border. This space can enhance the visual layout by providing breathing room and improving readability. It is particularly useful in scenarios where text needs to be separated from other elements or borders below it.
.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.