生成你自己的 Playground
输入任意 CSS 属性，即时获得一个可交互的实时示例。
padding-inline
.container { background-color: #f0f0f0; padding: 20px; border: 2px solid #ccc; }
.title { padding-inline: 30px; color: #333; }
.description { padding-inline: 30px; color: #666; }'padding-inline' CSS 属性是一个简写，用于在一个声明中设置元素左侧和右侧的内边距。它使代码更加简洁，特别适合在响应式设计中管理水平间距。该属性遵循文档的文本方向（LTR 或 RTL），因此是国际化的多功能选择。
padding-bottom
.container { background-color: #f0f0f0; padding: 20px; border: 2px solid #ccc; } .title { color: #333; } .description { padding-bottom: 30px; color: #666; } .extra { color: #999; }CSS中的'padding-bottom'属性用于在元素的内容与其底部边框之间创建空间。这个空间可以通过提供呼吸感和改善可读性来增强视觉布局。在需要将文本与其下方的其他元素或边框分开时，这个属性特别有用。
padding-block-start
.container { background-color: lightblue; padding: 20px; } .title { padding-block-start: 30px; font-size: 24px; } .description { font-size: 16px; }'padding-block-start' CSS 属性设置块容器开始处的内边距空间，在垂直书写模式中，这一侧是顶部。这个属性在创建布局时特别有用，尤其是在响应式设计中，书写方向可能会发生变化时，可以保持一致的间距。
padding-block-end
.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;
}'padding-block-end' CSS 属性设置块容器末端的内边距区域。这个属性对于控制布局非常有用，因为它尊重内容的书写模式，从而实现更具响应性的设计。通过使用这个属性，您可以确保块元素末端的间距保持一致，无论文本方向如何。
padding-block
.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; }'padding-block' CSS 属性是一个简写，用于设置元素的 block-start 和 block-end 侧的内边距，这对应于垂直书写模式中的顶部和底部内边距。这个属性对于创建能够适应不同书写模式和屏幕方向的响应式设计特别有用。