Logical CSS: Padding And Margins In Multi-lingual Web-Apps
Tags: webdev, javascript, programming, css
Published: 2023-04-14 11:02:21

There are two modules of CSS properties — Logical and Physical. If you are working on a multi-lingual web-app, then logical CSS properties will come real handy.

Physical properties refer to the physical aspects of the viewports — height/width of the viewport.

On the other hand, logical CSS properties works according to the flow of content. The values of such properties change with the change of:

1.  [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)
2.  [text direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)

## The Need For Logical CSS

Consider this example of a button with an icon on the left. Sample button with an icon and a margin between the icon and button text is shown below.

![Sample button with an icon and a margin between the icon and button text](https://miro.medium.com/v2/resize:fit:980/1*AEy1GxhwhoTs3kE6sPAUDg.png)



All is good till we are dealing with languages that are left-to-right. With languages like Arabic/Hebrew, which are right-to-left, the button will look something like this (Button with language right-to-left):

![Button with language right-to-left](https://miro.medium.com/v2/resize:fit:748/1*xv5ob4gYEipuTW8OZL2LuA.png)


Here, the icon has the margin on the wrong side. If you want to check, you can use the  `dir`  attribute for  `<p>`  tag to change the writing direction.

```html
<button dir="rtl">  
    <svg></svg>  
    <span>Sample Button</span>  
</button>
```

To fix this, in addition to providing automatic support for internationalization, and creating a more robust front-end, we have **_CSS Logical Properties._**

## Defination

> CSS Logical Properties and Values is a module of  [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)  introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
> 
> The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.  
> [- MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)

The thing to note in the above detailed (also verbose) defination is:  _Logical properties define direction‐relative equivalents of their corresponding physical properties._

Some of the Logical CSS properties are:

1.  margin-block
2.  margin-block-start
3.  margin-block-end
4.  margin-inline
5.  margin-inline-start
6.  margin-inline-end

The above combination exists for  `padding`  too. To go through a complete list of these Logical CSS properties, explore  [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).

## Physical CSS Properties: Rewind

If you are fimiliar with the workings and  [short-hands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#margin_and_padding_properties)  for  `margin`  and  `padding`  , then you know that the values go clockwise. For example:

`margin: 1px 2px 3px 4px;`

sets position 1, 2, 3 and 4 in clock-wise direction.

![Clockswise positions to explain shorthands for margin and padding](https://miro.medium.com/v2/resize:fit:158/0*hSyElQS1vhqAAVHX.png)

Clockswise positions to explain shorthands for margin and padding

## Understanding The Basics Of Logical CSS Properties

For this, we’ll consider going over the 4 basic properties:

1.  padding-inline and padding-block
2.  margin-inline and margin-block

The margin and padding here are “flow relative” and not “direction relative”. This means, historically when we applied`margin-top`  to a block, it added margin-top according to the physical aspect of the viewport — irrespective of the language direction/writing-mode. This causes an issue like:

![Example of physical margin-top](https://miro.medium.com/v2/resize:fit:1400/1*CPJDQAbeIi0KCjuhexbkHQ.png)


But what should actually happen when the direction or writing-mode changes:

![Example of logical margin-block-start](https://miro.medium.com/v2/resize:fit:1400/1*BEa6glZqpAb1VccS6ELijA.png)

## Understanding Block Flow

The block flow is the direction in which the next “block” element will be placed. For example, if there are two  `<div>`  tags, so where the adjacent  `<div>`  will be placed is determined by the block flow.

![Block Flow](https://miro.medium.com/v2/resize:fit:1400/1*18srIzzgYCyZ4Jcp9du9YA.png)

## Understanding Inline Flow

The inline flow is the direction in which the next “inline” element will be placed. i.e. how the words flow in a sentence. For example, if there are two  `<span>`  tags, so where the adjacent  `<span>`  will be placed is determined by the inline flow.

![Inline Flow](https://miro.medium.com/v2/resize:fit:1400/1*Vn_UFfIp6gQdfkvRqU9dog.png)

With logical properties,  `margin-top`  becomes  `margin-block-start`  , irrespective of the writing mode or direction. This helps to create a more inclusive front-end and hence the block flow has appropriate margins.

## Box Model for Logical CSS Properties

![Box Model for Logical CSS Properties](https://miro.medium.com/v2/resize:fit:1400/0*ac-ViFSQw4Zf3qiZ)

Image Credits:  [Box-model for logical CSS properties:](https://web.dev/)

Smart readers must have accounted for similarities with inline as well:

`text-align: right;`  becomes  `text-align:end`

This helps us to align the text on the basis of “reading direction” and not to the physical right of the viewport.

For  `direction: ltr`  and  `text-align: end`

![Direction left to right](https://miro.medium.com/v2/resize:fit:1400/1*ROmf0INu2f9wJCj9f06T9Q.png)

For  `direction:rtl`  and and  `text-align: end`

![Direction right to left](https://miro.medium.com/v2/resize:fit:1400/1*ericVir0wfecoNY8nU1RdA.png)

## Support

The properties having a suffix of  `start`  and  `end`  (`margin-block-start`  and  `margin-block-end`) have strong compatibility and are a good choice for desktop and mobile both. But the properties which lack the suffix like  `margin-block`  and  `margin-inline`  are good for desktop but not for mobile.

You can explore  [CANIUSE.COM](https://caniuse.com/?search=margin-block)  to check complete support.

Thanks for reading ❤

> _Want to connect?  
> Follow me on_ [_Twitter_](https://twitter.com/secondbestcoder) _and_ [_LinkedIn_](https://www.linkedin.com/in/aditya-tyagi-03b4189a/) _or reach out in the comments below!_