I've noticed that some content creators are starting to use margin-inline-end instead of just margin to style things like descriptions, etc. And if we lookup the definition it says this.
The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
So it makes the styling dependent on the values for writing-mode, direction, and text-orientation.
So I imagine that when a site is translated by google it may change these values, and this will trigger the margin-inline-end styling adjustment.
Is that what the targeted use case is?
How would we go about understanding when and how to use margin-inline styling in general, instead of just margin?
It's not only about logical or physical properties. margin-inline is also a shorthand for margin-left and margin-right.
Centering horizontally using margin-inline: auto is better than margin: 0 auto because you are not obliged to set 0 to the top and bottom margin.
As for the logical part here is a basic example of a menu in both english and arabic where the last item (contact) is isolated at the right or the left depending on the language:
ul {
margin: 0;
padding: 20px 0;
list-style: none;
display: flex;
gap: 1em;
font: bold 20px system-ui;
}
ul li:last-child {
margin-inline-start: auto;
}<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<ul dir="rtl">
<li> الصفحة الرئيسية </li>
<li> المقالات </li>
<li> المشاريع </li>
<li> الاتصال </li>
</ul>