CSS logical properties: using the margin-block and margin-inline instead of the default margin

栏目: IT技术 · 发布时间: 4年前

内容简介: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.some textIn this content adding a

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.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

浪潮之巅(第2版)(套装上下册)

浪潮之巅(第2版)(套装上下册)

吴军 / 人民邮电出版社 / 2013-7 / 80.00元

一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,这本书也着力讲述很多尚在普及或将要发生的,比如微博和云计算,以及对下一代互联网科技产业浪潮的判断和预测。因为在极度商业化的今天,科技的进步和商机是分不开的。 ......一起来看看 《浪潮之巅(第2版)(套装上下册)》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具