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.
đź“– Neural networks for Javascript developers
The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!