CSS logical properties: using the margin-block and margin-inline instead of the...
source link: http://www.js-craft.io/blog/css-logical-properties-using-the-margin-block-and-margin-inline-instead-of-the-default-margin/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Take the following example. We have a link, followed by a few words. And we want a 20px margin space between the link and the text.
.container { border: 1px solid black; display: float; padding: 5px; } a { margin-right: 20px; background-color: yellow; }
some text
In this content adding a margin-right: 20px;
makes perfect sense.
But what if the flex-direction of the container changes in reverse? Or the user is using a translation extension? Arabic is read right to left.
Then our element will look like this:
some text
The margin will still be on the right side, and we will have to add some more lines of code to make it work again.
Meet the CSS logical properties
. We can replace the plain old margin with margin-inline-start: 20px;
.
a { margin-inline-start: 20px; }
What it does is instead of saying "add a margin to the right”, we will have “regardless of direction, put a margin on the starting side”. It does not matter if the starting side is on the left or the right.
some text
Pretty cool, no?
If we want to replace some other margins, we can use the following table of correspondence:
margin-top -> margin-block-start margin-left -> margin-inline-start margin-right -> margin-inline-end margin-bottom -> margin-block-end
And it works also with border and padding .
I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.
Recommend
-
55
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8132 本文可全文转载,个人博客无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要...
-
6
Digging Into CSS Logical Properties 10 Mar 2021 The support for CSS logical properties is getting better by time. However, I still struggle to memorize them each ti...
-
5
logical properties CSS Logical Properties and Values Ollie Williams on Jul 27, 2021 (Update...
-
2
A Tasty Treats Podcast for Web Developers.Ask a Potluck Question →Wes Bos
-
4
Logical Properties for Useful Shorthands Tue Jul 19 2022 Something I like about logical properties is the...
-
1
Logical Properties for Useful Shorthands
-
2
Day 2: logical properties posted on September 27., 2022 It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve...
-
3
September 30th, 2022 I wrote recently about making the switch to logical properties over on The Session
-
1
Day 31: logical border properties posted on November 7., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about....
-
2
Two new properties in CSS - overflow:clip and overflow-clip-margin Nov 11, 2022 , by Prasad Walvekar 4 minute read
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK