A property like margin-left
seems fairly logical, but as Manuel Rego Casasnovas says:
Imagine that you have some right-to-left (RTL) content on your website your left might be probably the physical right, so if you are usually setting
margin-left: 100px
for some elements, you might want to replace that withmargin-right: 100px
.
Direction, writing mode, and even flexbox all have the power to flip things around and make properties less logical and more difficult to maintain than you’d hope. Now we’ll have margin-inline-start
for that. The full list is:
margin-{block,inline}-{start,end}
padding-{block,inline}-{start,end}
border-{block,inline}-{start,end}-{width,style,color}
Manuel gets into all the browser support details.
Rachel Andrew also explains the logic:
… these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in grid-area makes complete sense if you had never encountered the existing way that we set these values in a shorthand.
Here’s the logical properties and how they map to existing properties in a default left to right nothing-else-happening sort of way.
Property | Logical Property |
---|---|
margin-top | margin-block-start |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
margin-bottom | margin-block-end |
Property | Logical Property |
---|---|
padding-top | padding-block-start |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
padding-bottom | padding-block-end |
Property | Logical Property |
---|---|
border-top{-size|style|color} | border-block-start{-size|style|color} |
border-left{-size|style|color} | border-inline-start{-size|style|color} |
border-right{-size|style|color} | border-inline-end{-size|style|color} |
border-bottom{-size|style|color} | border-block-end{-size|style|color} |
Property | Logical Property |
---|---|
top | offset-block-start |
left | offset-inline-start |
right | offset-inline-end |
bottom | offset-block-end |
Direct Link to Article — Permalink
The post CSS Logical Properties appeared first on CSS-Tricks.