CSS Margin with RTL elements

Question

I have a DIV that is declared with style="direction:ltr" in-order to display right to left items.

My issue that if I declare a div with a right margin (margin-right), this margin does not automatically switch to the left side when the div is RTL.

This forces me to style every div that I want to be RTL with margin-left.

Can I use some CSS paramter that would always put the margin at the end of the DIV and will automatically switch when using RTL? (Horizontally)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container{
    display:flex;
    flex-direction:row;
}

.text{
    margin-right:30px;
}

</style>

<div class="container">
    <div class="text">On this DIV the margin between the text and the icon is correct.</div>
    <div class="icon"><i class="fa fa-inbox" style="margin-right:3px; font-size:24px"></i><div>
</div>

<div class="container" style="direction:rtl">
    <div class="text">On this RTL DIV the margin between the text and the icon is missing because the margin parameter is <b>margin-right</div>
    <div class="icon"><i class="fa fa-inbox" style="margin-right:3px; font-size:24px"></i><div>
</div>

Answer 1

Use css property "...-inline-start" instead, that will align it to either the left or the right depending on the browser direction. You can test that easily by adding dir="rtl" to the html element.

.text {
    margin-inline-start: 10px;
}

PS.: inline is for left/right, use block for top/bottom, e.g. margin-block-start to add margin to the top, padding-inline-start to add padding to the left in ltr languages and rigth in rtl languages