CSS 邏輯屬性
針對可以抽取出共性的抽象概念(如開始位置，或行)，
這些邏輯抽象概念需要在不同書寫模式下映射到左或右、上或下等物理的概念上，
CSS 邏輯屬性則提供此種操作方式。
以下列出在相同語系之下，物理屬性相同於邏輯屬性之列表
一、margin
| margin 屬性 | margin 邏輯屬性 |
|---|---|
| margin-top | margin-block-start |
| margin-right | margin-inline-end |
| margin-bottom | margin-block-end |
| margin-left | margin-inline-start |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> .origin { width: 100px; height: 100px; border: 1px red solid; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; } .logic { width: 100px; height: 100px; border: 1px red solid; margin-block-start: 10px; margin-inline-end: 10px; margin-block-end: 10px; margin-inline-start: 10px; } </style> </head> <body> <div class="origin"> <p>origin</p> </div> <div class="logic"> <p>logic</p> </div> </body> </html>
其畫面為
二、border
| border 屬性 | border 邏輯屬性 |
|---|---|
| border-top | border-block-start |
| border-right | border-inline-end |
| border-bottom | border-block-end |
| border-left | border-inline-start |
三、padding
| padding 屬性 | padding 邏輯屬性 |
|---|---|
| padding-top | padding-block-start |
| padding-right | padding-inline-end |
| padding-bottom | padding-block-end |
| padding-left | padding-inline-start |
四、positon
| positon 屬性 | positon 邏輯屬性 |
|---|---|
| top | inset-block-start |
| right | inset-inline-end |
| bottom | inset-block-end |
| left | inset-inline-start |
五、width、height
| width、height 屬性 | width、height 邏輯屬性 |
|---|---|
| width | inline-size |
| height | block-size |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> .origin { width: 100px; height: 100px; border: 1px red solid; } .logic { inline-size: 100px; block-size: 100px; border: 1px red solid; } </style> </head> <body> <div class="origin"> <p>origin</p> </div> <div class="logic"> <p>logic</p> </div> </body> </html>
其畫面為
六、float
| float 屬性 | float 邏輯屬性 |
|---|---|
| left | inline-start |
| right | block-end |
七、text-align
| width、height 屬性 | width、height 邏輯屬性 |
|---|---|
| left | start |
| right | end |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> .origin { width: 100px; height: 100px; border: 1px red solid; text-align: right; } .logic { inline-size: 100px; block-size: 100px; border: 1px red solid; text-align: end; } </style> </head> <body> <div class="origin"> <p>origin</p> </div> <div class="logic"> <p>logic</p> </div> </body> </html>
其畫面為
小結：
由各列表可以得知，邏輯屬性對於垂直方向屬性的關鍵字為 block，水平方向屬性的關鍵字為 inline。
對於不同語系的國家，書寫順序會可能有很大的差異，意思就是 block 跟 inline 的方向不同。例如：
在英語國家 padding-inline-start = padding-left
在阿拉伯padding-inline-start = padding-right
在日本 padding-inline-start = padding-top
這就意味著舊的邏輯屬性，在某些國家裏會變得不合常理。
參考資料：