# Logical Properties

> 書字方向（横書き・縦書き）に依存しない論理的なプロパティです。margin-inline-start、padding-block-endなど、方向に中立的な指定が可能です。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/logical-properties/

## 構文

```css
margin-inline | margin-block | padding-inline | padding-block | inset-inline | inset-block
```

## Tailwindでは

- 一般形: `ms-* / me-*（margin-inline-start/end）、ps-* / pe-*、start-* / end-*`
- 補足: v4は物理系ユーティリティ（mx-*等）の実体も論理プロパティ（margin-inline）で出力される。RTL対応はms-*/me-*を選ぶ。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 69+ / Firefox 41+ / Safari 12.1+ / Edge 79+

## コード例

### 例1: テキスト開始側にマージン（横書きなら左、縦書きなら上）

```css
margin-inline-start: 20px;
```

### 例2: ブロック方向のパディング（横書きなら上下）

```css
padding-block: 10px 20px;
```

## TIPS

国際化対応に最適。RTL言語でも自動対応

## AIがよく間違えるポイント

論理プロパティ（inline/block系）と物理プロパティ（left/right系）の混在は、上書き関係が読めない保守困難なCSSを生みます。AIはプロジェクトの方針を確認せず混ぜてくるので、「論理で統一」等の方針を最初に伝えるのが有効です。RTL・縦書き要件がなくても、margin-inline: autoなど記述が短くなる場面は多くあります。

## AIへの依頼文例

- このスタイルシートの物理/論理プロパティの混在を監査して、論理プロパティに統一して

## 関連プロパティ

- [writing-mode](https://www.css-dictionary.com/property/writing-mode.md)
- [margin-inline](https://www.css-dictionary.com/property/margin-inline.md)
- [padding-inline](https://www.css-dictionary.com/property/padding-inline.md)
- [inset-inline](https://www.css-dictionary.com/property/inset-inline.md)