Collection of CSS Logical Properties Examples

Collections of examples of how the new CSS Logical Properties are working.

In the text-align property:

The new #CSS way to use the "text-align" property
(works according to the "direction" property)

* Works in all upgradable browsers pic.twitter.com/AfeMeC2WKg
— Elad Shechter (@eladsc) July 1, 2021

Using with CSS Positions:

#CSS Positions got the 'inset' property, a shorthand to describe all the directions combined.

Now has full support in all the updatable browsers. pic.twitter.com/zk31WzdGwo
— Elad Shechter (@eladsc) June 6, 2021

Vertical and Horizontal Paddings:

Now you can unite #CSS 'vertical-padding' or 'horizontal-padding'.

Works as well for the 'margin' and the 'border' properties.

Supported in all updatable browsers.

(while 'writing-mode' stays with its default value 'horizontal-tb') pic.twitter.com/SWURNrv7JE
— Elad Shechter (@eladsc) June 9, 2021

Horizontal Margins:

🤓 The New #CSS way for centering the main container HTML element.

(without declaring vertical margins)
* Supported in all updatable browsers. pic.twitter.com/y2Y81rkF7A
— Elad Shechter (@eladsc) June 17, 2021

More bout CSS Logical Properties, you can read my article “New CSS Logical Properties!” or watch my talk “The New CSS Logical Properties“.

Elad Shechter CSS/HTML Architect

I'm a Web Developer specializing in CSS & HTML design and architecture. Besides this, I'm a Writer of various globally known CSS articles and a CSS speaker.

Collection of CSS Logical Properties Examples