# CSS Logical Properties

CSS Logical Properties and Values provide a way to control layout through logical, rather than physical, direction and dimension mappings. They allow you to build layouts that work automatically across different writing modes (e.g., Left-to-Right, Right-to-Left, Top-to-Bottom).

## 1. The Concept

Physical properties like `margin-left`, `padding-top`, or `width` are tied to the physical screen.
Logical properties like `margin-inline-start`, `padding-block-start`, or `inline-size` are tied to the flow of content.

*   **Block Axis:** The direction in which blocks are stacked (usually top-to-bottom).
*   **Inline Axis:** The direction in which text flows (usually left-to-right).

## 2. Sizing

Instead of `width` and `height`, use:

*   **`inline-size`**: Corresponds to `width` in horizontal writing modes.
*   **`block-size`**: Corresponds to `height` in horizontal writing modes.

```css
.box {
  inline-size: 300px; /* Width in LTR/RTL */
  block-size: 200px;  /* Height in LTR/RTL */
}
```

## 3. Margins, Padding, and Borders

Replace `top`, `bottom`, `left`, `right` with `block-start`, `block-end`, `inline-start`, `inline-end`.

| Physical | Logical |
| :--- | :--- |
| `margin-top` | `margin-block-start` |
| `margin-bottom` | `margin-block-end` |
| `margin-left` | `margin-inline-start` (LTR) / `margin-inline-end` (RTL) |
| `margin-right` | `margin-inline-end` (LTR) / `margin-inline-start` (RTL) |

### Shorthands

*   **`margin-block`**: Sets both start and end block margins. In a standard horizontal writing mode (like English), this is equivalent to `margin-top` and `margin-bottom`.
*   **`margin-inline`**: Sets both start and end inline margins. In a standard horizontal writing mode (like English), this is equivalent to `margin-left` and `margin-right`.

The key difference is that `margin-block` follows the flow of blocks (paragraphs, divs), while `margin-inline` follows the flow of text.

```css
.card {
  padding-inline: 20px; /* Left and Right padding */
  margin-block: 10px;   /* Top and Bottom margin */
  border-block-end: 1px solid black; /* Bottom border */
}
```

## 4. Positioning

For `position: absolute` or `fixed`, use logical offsets.

*   `top` -> `inset-block-start`
*   `bottom` -> `inset-block-end`
*   `left` -> `inset-inline-start`
*   `right` -> `inset-inline-end`

```css
.badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0; /* Top-Right in LTR, Top-Left in RTL */
}
```

## 5. Why use them?

If you translate your site into a Right-to-Left (RTL) language like Arabic or Hebrew, logical properties ensure your layout flips correctly without writing a separate RTL stylesheet.

[[programming/css/css]]
[[programming/css/box-model]]