Why you should start using margin-inline & padding-inline.
Everybody starts learning css from margins and paddings. And in css there are many margin and padding related properties.To name few, margin-left, padding-right, padding-block-start, margin-inline-end, etc. In this article I would like to introduce margin-inline and padding-inline. And a specific problem these properties solve, and eventually saving lots of your time.
Problem and Solution
There is common CSS problem when your web-app needs both LTR and RTL support with same css file. Usually you start with LTR development, and want RTL version with minimal effort. Even though the directionality can be easily changed using html "dir" property. You might have to still spend lot of time over-riding horizontal margins and paddings for RTL direction. This could be more relevant for those who are working for companies or having clients in middle-east. You will have RTL view for languages like arabic, hebrew, Persian/Farsi, Urdu etc
This problem can be addressed using margin-inline and padding-inline. More specifically margin-inline-end over margin-right or padding-inline-start over padding-left.
margin-right: 10px; ❌
margin-inline-end: 10px; ✅
padding-left : 5px; ❌
padding-inline-start 5px; ✅
These new properties are dependent on the directionality of the element. Thus the direction of margin and padding switches based on element direction.
Example
To demonstrate the use-case let's take two similar elements. Here the red box is using margin-left while green box is using margin-inline-start having value 30px. Both of them appears exactly same in terms of margin in LTR direction.
And then we change the direction of the document. Now the elements doesn't look the same anymore. Green box gives a more appropriate view for RTL layout. While red box has not changed margin based on direction, so here we have to over-write the existing css based on the html:dir(rtl) attribute to attain desired result.
Play with working example here - codepen link
Cross-browser support
Now a major issue when you intend to use a relatively newer css property, is that whether it supports across different browsers. And yes these properties are supported across most of the popular browsers in internet.
Note: You shouldn't worry much even if it doesn't have support for internet explorer in late 2022. Microsoft has already dropped support for the browser from June 15, 2022. Thanks to Microsoft 🙏.