bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
78 lines
1.7 KiB
Markdown
78 lines
1.7 KiB
Markdown
---
|
|
name: layout-padding
|
|
description: Controlling element padding with spacing scale, logical properties, and directional utilities
|
|
---
|
|
|
|
# Padding
|
|
|
|
Utilities for controlling an element's padding.
|
|
|
|
## Usage
|
|
|
|
### All sides
|
|
|
|
Use `p-<number>` to set padding on all sides:
|
|
|
|
```html
|
|
<div class="p-4">Padding on all sides</div>
|
|
<div class="p-8">Larger padding</div>
|
|
```
|
|
|
|
### Individual sides
|
|
|
|
Use `pt-<number>`, `pr-<number>`, `pb-<number>`, `pl-<number>`:
|
|
|
|
```html
|
|
<div class="pt-6">Top padding</div>
|
|
<div class="pr-4">Right padding</div>
|
|
<div class="pb-8">Bottom padding</div>
|
|
<div class="pl-2">Left padding</div>
|
|
```
|
|
|
|
### Horizontal and vertical
|
|
|
|
Use `px-<number>` for horizontal, `py-<number>` for vertical:
|
|
|
|
```html
|
|
<div class="px-8">Horizontal padding</div>
|
|
<div class="py-8">Vertical padding</div>
|
|
```
|
|
|
|
### Logical properties
|
|
|
|
Use `ps-<number>` (padding-inline-start) and `pe-<number>` (padding-inline-end) for RTL support:
|
|
|
|
```html
|
|
<div dir="ltr">
|
|
<div class="ps-8">Left padding in LTR</div>
|
|
<div class="pe-8">Right padding in LTR</div>
|
|
</div>
|
|
<div dir="rtl">
|
|
<div class="ps-8">Right padding in RTL</div>
|
|
<div class="pe-8">Left padding in RTL</div>
|
|
</div>
|
|
```
|
|
|
|
### Custom values
|
|
|
|
Use arbitrary values for custom padding:
|
|
|
|
```html
|
|
<div class="p-[5px]">Custom padding</div>
|
|
<div class="px-[calc(50%-1rem)]">Custom calculation</div>
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- Spacing scale: `p-0` through `p-96` (and beyond)
|
|
- Individual: `pt-*`, `pr-*`, `pb-*`, `pl-*` for specific sides
|
|
- Axes: `px-*` (horizontal), `py-*` (vertical)
|
|
- Logical: `ps-*` (start), `pe-*` (end) adapt to text direction
|
|
- No negative padding - padding cannot be negative in CSS
|
|
- Common patterns: `p-4`, `px-6`, `py-8`, `pt-2`, `pb-4`
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/padding
|
|
-->
|