Presets

Writing Mode & Direction

Sizing

Margin (Block & Inline)

Padding (Block & Inline)

Border Radius (Logical)

Border (Block & Inline)

Text & Float

Options

Saved Configurations

Live Preview

horizontal-tbLTR

Logical Properties Demo

This element adapts to any writing mode and text direction using CSS logical properties.

Hello World - مرحبا بالعالم

Property Mapping

block-start→top
block-end→bottom
inline-start→left
inline-end→right

Generated CSS

/* CSS Logical Properties */
/* Adapts to writing-mode and direction */

.element {
  writing-mode: horizontal-tb;
  direction: ltr;

  inline-size: 300px;
  max-inline-size: 500px;

  margin-block-end: 16px;
  margin-inline: 0px;
  padding-block: 16px;
  padding-inline: 24px;

  border-block-end: 1px solid #e0e0e0;
  border-radius: 8px;
}

/* Physical property equivalents (LTR horizontal-tb) */
/*
  margin-block-start  → margin-top
  margin-block-end    → margin-bottom
  margin-inline-start → margin-left (margin-right in RTL)
  margin-inline-end   → margin-right (margin-left in RTL)
  inline-size         → width
  block-size          → height
  inset-block-start   → top
  inset-inline-start  → left (right in RTL)
*/

HTML Structure

<div class="element">
  <h3>Logical Properties Demo</h3>
  <p>This element uses CSS logical properties for internationalization-ready layouts.</p>
</div>

Logical Properties Reference

Sizing

  • inline-size → width
  • block-size → height
  • min/max-inline-size
  • min/max-block-size

Margin & Padding

  • margin-block → top/bottom
  • margin-inline → left/right
  • padding-block-start
  • padding-inline-end

Border Radius

  • border-start-start-radius
  • border-start-end-radius
  • border-end-start-radius
  • border-end-end-radius

Positioning

  • inset-block-start → top
  • inset-block-end → bottom
  • inset-inline-start → left
  • inset-inline-end → right

Rate this tool