Stop using margin-left and padding-right
The best way to build any app
The real tax on vibe builders right now isn’t effort, it’s cost. Every tool wants you paying for their model usage and hosting forever. Orchids.app lets you bring your own and use tools/SDKs that already exist elsewhere.
Plug in your ChatGPT, Claude Code, Gemini, Copilot, GLM, or any API key you already pay for.
You keep control of the bill. And best part is: you don’t get price locked because you shipped with Orchids. Deploy your code straight to Vercel with one click.
Hey everyone,
If you’ve ever had to localize a website for languages like Arabic or Hebrew, you know the pain of “flipping” your CSS. You end up writing code like this:
/* The "Old" Manual Way */
.card {
margin-left: 20px;
text-align: left;
}
/* Now you have to override it for RTL */
[dir="rtl"] .card {
margin-left: 0;
margin-right: 20px;
text-align: right;
}
It’s redundant, error-prone, and doubles your CSS weight. Not anymore.
The Modern Way: CSS Logical Properties
Instead of styling based on physical directions (left, right, top, bottom), we now style based on the flow of the content.
margin-leftbecomesmargin-inline-startmargin-rightbecomesmargin-inline-endwidthbecomesinline-sizeheightbecomesblock-size
/* The Modern, Adaptive Way */
.card {
/* This automatically puts space at the "start"
regardless of language direction! */
margin-inline-start: 20px;
/* Centers text based on flow */
text-align: start;
}
Why this is a win:
- Zero Overrides: One line of CSS works for every language in the world.
- Future-Proof: If you ever rotate your text (writing-mode: vertical), your margins will automatically move to the correct “top” or “bottom.”
- Cleaner Architecture: It forces you to think about layout structure rather than just “pixels on a screen.”
Browser Support
This is fully Baseline and has been supported in all major browsers (Chrome, Firefox, Safari, Edge) for years. It is 100% safe for production today.
Happy coding!
Marko