IconVault logoIconVault
Sign in

Logical Properties - Free Online CSS Tool | IconVault

Convert physical CSS properties to logical ones (margin-inline-start, inset-block) with RTL previews. Free, runs in your browser.

All tools

Logical Properties

Physical to logical CSS converter

5 of 5 free uses left

Physical CSS

Converted 11 properties.

Logical CSS

.card {
  margin-inline-start: 16px;
  margin-block-start: 8px;
  padding-inline-end: 24px;
  padding-block-end: 12px;
  border-inline-start: 2px solid #0ea5e9;
  border-block-start-width: 4px;
  border-start-end-radius: 8px;
  text-align: end;
  float: inline-start;
  inset-inline-start: 0;
  inset-block-start: 10px;
}

Honest note: this covers the common properties - margin/padding, border sides, border-radius corners, text-align, float, clear, inset, and size. Shorthand and uncommon properties are left unchanged.

5 of 5 free copies left - runs fully on your device.

RTL preview with logical properties

Toggle the direction and watch the accent border, badge, and text alignment flip automatically - no extra CSS needed. That is what logical properties buy you.

About this tool

IconVault's Logical Properties tool maps physical properties like margin-left and padding-top to their logical equivalents: margin-inline-start, padding-block, inset-inline-end, border-start-start-radius. Flip the preview between LTR and RTL to see why logical properties make layouts flip correctly for free.

Logical properties follow the writing mode and direction instead of the screen: inline-start means left in English and right in Arabic. They are the correct foundation for multilingual sites. Free and runs fully in your browser.

Frequently asked questions

Popular searches

css logical propertiescss logical properties convertermargin-inline-startcss rtlcss logical vs physical propertiescss inline-startcss block-sizecss writing-modecss direction rtlcss logical properties listcss margin-inlinecss padding-inlinecss inset-inlinecss border-inline-startconvert css to logical propertiescss rtl supportcss logical properties tutorialcss physical to logicalcss inset-blockcss logical properties browser supportcss logical properties cheat sheetcss logical properties examplescss inline-sizecss block-startcss text-align startcss float inline-startcss logical properties rtl demointernationalization csscss multilingual layoutcss logical valuescss logical properties generatorcss start end propertiescss logical shorthandcss margin-blockcss padding-blockcss border-blockcss logical properties caniusecss logical properties explainedcss logical properties for arabiccss logical properties hebrewrtl css best practicescss logical properties tool freecss direction propertycss unicode-bidicss logical border radiuscss inset-inline-startcss logical properties mdncss writing mode verticalcss logical properties tablecss logical properties for beginnerscss logical properties margin padding

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →