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.
127 lines
2.7 KiB
Markdown
127 lines
2.7 KiB
Markdown
---
|
|
name: layout-margin
|
|
description: Controlling element margins with spacing scale, negative values, logical properties, and space utilities
|
|
---
|
|
|
|
# Margin
|
|
|
|
Utilities for controlling an element's margin.
|
|
|
|
## Usage
|
|
|
|
### All sides
|
|
|
|
Use `m-<number>` to set margin on all sides:
|
|
|
|
```html
|
|
<div class="m-4">Margin on all sides</div>
|
|
<div class="m-8">Larger margin</div>
|
|
```
|
|
|
|
### Individual sides
|
|
|
|
Use `mt-<number>`, `mr-<number>`, `mb-<number>`, `ml-<number>`:
|
|
|
|
```html
|
|
<div class="mt-6">Top margin</div>
|
|
<div class="mr-4">Right margin</div>
|
|
<div class="mb-8">Bottom margin</div>
|
|
<div class="ml-2">Left margin</div>
|
|
```
|
|
|
|
### Horizontal and vertical
|
|
|
|
Use `mx-<number>` for horizontal, `my-<number>` for vertical:
|
|
|
|
```html
|
|
<div class="mx-8">Horizontal margin</div>
|
|
<div class="my-8">Vertical margin</div>
|
|
```
|
|
|
|
### Negative margins
|
|
|
|
Prefix with dash for negative values:
|
|
|
|
```html
|
|
<div class="-mt-8">Negative top margin</div>
|
|
<div class="-mx-4">Negative horizontal margin</div>
|
|
```
|
|
|
|
### Auto margins
|
|
|
|
Use `m-auto` or directional auto margins for centering:
|
|
|
|
```html
|
|
<div class="mx-auto">Centered horizontally</div>
|
|
<div class="ml-auto">Pushed to right</div>
|
|
```
|
|
|
|
### Logical properties
|
|
|
|
Use `ms-<number>` (margin-inline-start) and `me-<number>` (margin-inline-end) for RTL support:
|
|
|
|
```html
|
|
<div dir="ltr">
|
|
<div class="ms-8">Left margin in LTR</div>
|
|
<div class="me-8">Right margin in LTR</div>
|
|
</div>
|
|
<div dir="rtl">
|
|
<div class="ms-8">Right margin in RTL</div>
|
|
<div class="me-8">Left margin in RTL</div>
|
|
</div>
|
|
```
|
|
|
|
### Space between children
|
|
|
|
Use `space-x-<number>` or `space-y-<number>` to add margin between children:
|
|
|
|
```html
|
|
<div class="flex space-x-4">
|
|
<div>01</div>
|
|
<div>02</div>
|
|
<div>03</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col space-y-8">
|
|
<div>01</div>
|
|
<div>02</div>
|
|
<div>03</div>
|
|
</div>
|
|
```
|
|
|
|
### Reversing space
|
|
|
|
Use `space-x-reverse` or `space-y-reverse` with reversed flex directions:
|
|
|
|
```html
|
|
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
|
|
<div>01</div>
|
|
<div>02</div>
|
|
<div>03</div>
|
|
</div>
|
|
```
|
|
|
|
### Custom values
|
|
|
|
Use arbitrary values for custom margins:
|
|
|
|
```html
|
|
<div class="m-[5px]">Custom margin</div>
|
|
<div class="mx-[calc(50%-1rem)]">Custom calculation</div>
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- Spacing scale: `m-0` through `m-96` (and beyond)
|
|
- Negative: prefix with dash (`-m-4`, `-mt-8`, `-mx-4`)
|
|
- Auto: `m-auto`, `mx-auto`, `my-auto`, `mt-auto`, etc.
|
|
- Logical: `ms-*` (start), `me-*` (end) adapt to text direction
|
|
- Space utilities: `space-x-*`, `space-y-*` add margin to all children except last
|
|
- Space reverse: `space-x-reverse`, `space-y-reverse` for reversed flex layouts
|
|
- Limitations: Space utilities don't work well with grids or complex layouts - use `gap` utilities instead
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/margin
|
|
-->
|