Revision:
CSS logical properties are versions of CSS properties - like margin and padding - written in a new way that forgoes physical directions (i.e. left, right, top, and bottom).
CSS logical properties and values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
The module defines logical properties and values for properties previously defined in CSS 2.1.
Logical properties define direction‐relative equivalents of their corresponding physical properties.
Cross-browser support is at a tipping point, and therefore it's good to take a look at logical properties and values.
If you're creating a website in multiple languages, logical properties and values are incredibly useful.
Even if you are not, there are still some convenient new shorthands it's worth knowing about.
code:
<div class="thing"></div>
<style>
.thing{margin-inline:auto; background-color:dodgerblue; width: 10vw; height:10vw;}
</style>
The whole point of logical properties is that they change based on context!
Logical properties and values use the abstract terms "block" and "inline" to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.
block dimension: the dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.
inline dimension: the dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.
the margin-inline property sets both margin-left and margin-right, and the margin-block property sets both margin-top and margin-bottom.
Logical properties have similar shorthands to set border and padding.
If you have a visual design that calls for borders only on the sides, you can just use border-inline instead of fussing with each physical direction on its own.
border-block
border-inline
<div class="inline-block spec">
<p class="spec border-block">border-block</p>
<p class="spec border-inline">border-inline</p>
</div>
<style>
.inline-block{display: flex; gap:1vw; justify-content:space-evenly; align-items: center;
height: 15vw; flex-wrap:wrap; background-color: beige;}
.border-block{padding-block: 3vw; border-block:1vw solid blue;}
.border-inline{padding-inline:2vw;border-inline:1vw solid green;}
</style>
Rather than thinking in physical terms, like left and right, we can think of an "inline" direction and a "block" direction: inline handles the left and right directions, while block manages top and bottom.
The writing-mode property in CSS includes the following values:
horizontal-tb: this is the default value, setting the the direction left-to-right for languages like English or French, and right-to-left for languages like Arabic. The tb stands for "top-to-bottom";
vertical-rl: this changes the direction to right-to-left in a vertical orientation for languages like Chinese, Japanese and Korean;
vertical-lr: this is used for vertical left-to-right languages, like Mongolian.
CSS logical properties offer a way to write CSS that is contextual. When using logical properties, spacing and layout are dependent on both the writing-mode and direction (whether set by either CSS or HTML). It therefore becomes possible to reuse CSS styles across different languages.
What makes logical properties and values so useful is that they will automatically cater to the context of the language.In a left-to-right language - like English -, margin-inline-start will set the left-side margin. For a right-to-left language - like Arabic, Urdu, or Hebrew -, it will set the right-hand margin. For vertical text (top-to-bottom language), margin-inline-start will cater to that context to, adding the margin at the top, which is where you would start reading from in any vertical language.
physical property: width, max-width, min-width ==> logical property: inline-size, max-inline-size, min-inline-size
physical property: height, max-height, min-height ==> logical property: block-size, max-block-size, min-block-size
physical property: border-top, border-bottom, border-left, border-right ==> logical property: border-block-start, border-block-end, border-inline-start, border-inline-end
physical property: border-top-color, border-top-width, border-top-style ==> logical property: border-block-start-color, border-block-start-width, border-block-start-style
physical property: border-top and border-bottom, border-left and border-right ==> logical property: border-block, border-inline
physical property: margin-top, margin-bottom, margin-left, margin-right ==> logical property: margin-block-start, margin-block-end, margin-inline-start, margin-inline-end
physical property: margin-top and margin-bottom, margin-left and margin-right ==> logical property: margin-block, margin-inline
physical property: padding-top, padding-bottom, padding-left, padding-right ==> logical property: padding-block-start, padding-block-end, padding-inline-start, padding-inline-end
physical property: padding-top and padding-bottom, padding-left and padding-right ==> logical property: padding-block, padding-inline
physical property: top, bottom, left, right ==> logical property: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end
physical property: top and bottom, left and right ==> logical property: inset-block, inset-inline
physical property: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius ==> logical property: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
physical property: float: left, float:right, clear: left; clear: right ==> logical property: float: inline-start, float: inline-end, clear: inline-start, clear: inline-end
physical property: resize: vertical, resize: horizontal, overflow-y, overflow-x ==> logical property: resize: block, resize: inline, overflow-block, overflow-inline
physical property: margin-top and m,argin-bottom, margin-left and margin-right ==> logical property: margin-block, margin-inline
Quotation in English
اقتباس في العربية
其实，这几种不同文字
<div>
<blockquote dir="ltr">Quotation in English</blockquote>
<blockquote dir="rtl">اقتباس في العربية</blockquote>
<blockquote class="vertical">其实，这几种不同文字</blockquote>
</div>
<style>
blockquote {border-inline-start: solid 0.2vw #DE354C; padding-inline: 1.2vw;
background-color: rgb(230,230,230);padding-block: 1vw;}
.vertical {writing-mode: vertical-rl; font-size: 2vw; font-family: Microsoft JhengHei,微軟正黑體,Heiti TC,黑體-繁,
sans-serif; line-height: 2; text-align: justify;}
</style>
<div class="special">
<div dir="ltr" class="outer">
<div class="inner"></div>
</div>
<div dir="rtl" class="outer">
<div class="inner"></div>
</div>
<div class="outer vertical-lr">
<div class="inner"></div>
</div>
<div class="outer vertical-rl">
<div class="inner"></div>
</div>
</div>
<style>
.outer {border: solid 4px black; block-size: 100px; inline-size: 100px; position: relative;}
.inner {block-size: 20px; inline-size: 20px; background-color: #4A90E2; position: absolute;
inset-block-end: 4px;inset-inline-end: 20px; }
.vertical-rl {writing-mode: vertical-rl; }
.vertical-lr {writing-mode: vertical-lr;}
.special{display: flex; flex-wrap: wrap; gap: 16px; margin: 16px;}
</style>