Is 「inset」 kind of CSS Logical properties ?
May 4, 2025
Introduction
CSS > inset 算是一個很新穎的屬性設置，透過它的收納與整理，便可以將 top、right、bottom & left 這四個定位屬性收納起來，也因為如此，便可以在 CSS 賦值變化中起了至關重要的角色，僅僅只需要一個 inset 便可以有效地將數個定位屬性進行洗滌與設置，可以說非常的便利。
而它也被列入 MDN > CSS logical properties and values 中，所以筆者很直覺地便認為它的值可以自動映像至對應的 logical properties 中。諮詢 Gemini 2.5 Pro 亦得了下列的解釋：
與筆者心中的想法一致。
The fact is …
在實際開發過程中，透過 CSS direction / writing-mode 設置後，才發現根本不是這麼一回事，inset shorthand 所陳述的意涵就只是很單純 top、right、bottom、left 這四個物理映射。它並不會直接 alias 到 inset-block-start、inset-inline-end、inset-block-end、inset-inline-start 這四個邏輯屬性。
也就是說如果想要一勞永逸的使用邏輯屬性來進行設置的話，就只能拆開使用 inset-inline、inset-block，當然也可以直接針對個別邏輯屬性設置：inset-inlne-start、inset-inline-end、inset-block-start、inset-block-end。方為保險。
Conclusion
現在查找文件或者 AI 協作固然方便，不過最好還是自己走一遭或做些驗證方為可靠，此次也是因為筆者做法比較老派才徹底校正了自己的錯誤觀念。
以上分享，希望對大家都能有所助益～