Margin/padding inline — block

I came accross the margin-inline property and was curious what they are used for and when to use them. After i made my research i was a bit relieved knowing that they work the same way with like the old fashion margin/ padding spacing but just with a little naming difference.

In this articles i will be talking about the margin-inline margin-block property and when to use them. So if you’ve ever come accross them and wondered when to use them, this article is for you.

So we’ve always gotten away with using the margin and padding to give spacing to out html elements and we’ve never had to worry about anything untill i guess someone thought about adressing the issue with the writing mode of other Languages where the flow is from left to right instead of right to left like the English language. Chinese and Japanese language for instance will read from right to left, where padding-right in English language may be not be padding-right in Japanese.

So inorder to address this, they w3c had to invent margin-block-start or padding-block-start which would now depend on your writing mode, text-orientation and direction properties. I will give an example to clear this up.

If your writing-mode is right to left like the Japanses then you can specify it like so

.myElement {
  padding-inline : 20px;
  writing-mode : vertical-lr;
}

This will give a spacing of 20px on the top and bottom of your element since your have specified a writing mode : vertical-lr. This further allows you to give start and end to the padding-inline property when you want to specify the padding to be either on the right or the left.

So if i need my padding to only be on the start in a japanese writing mode, i would do this

.myElement {
  padding-inline-start : 20px;
  writing-mode : horizontal-lr;
}

Note that as of this article the horizontal-lr is not compatible in all broswers.

The name inline is derived from the way a text will flow inline from left to right while block is derived from how stacks of block elements will flow form top to bottom.

.myElement {
  padding-inline-start : 10px; 
  margin-inline-end: 10px;
  writing-mode: vertical-lr;
}

Here padding will be 10px on the right and margin will be 10px on the left. Same thing applies for but border.

So with that been said, if youre building an application where your targetted users are Japanese and Chinese you might want to use the padding-inline specifics. Also if you have a design where the writing mode flows from right- to left then you might want to consider using the padding-inline or margin-inline to specify where you intend your spacing to be for anyone else who may be looking at your codebase in the future.