[CSS] 使用 CSS 的邏輯屬性簡化設定 box model 的水平或垂直方向的值

以往在設定 CSS 的元素時我們要去設定區塊跟空間有關的值，像是 margin 或 padding 之類的，會像這樣設定：

.box{
  margin: 10px;
}

這樣設定好的時候我們可以得到一個區塊四個邊的 margin 都是 10px，也可以透過設定一個值到四個值去設定，這是大家應該都能了解的。

不過如果我們想要只設定水平方向或垂直方向，像是：

.box{
  margin-left: 10px;
  margin-right: 10px;
}

這樣設定起來就會比較麻煩一點，而在新的 CSS 可以幫我們簡化，可以利用 *-inline 去設定水平方向，*-block 去設定垂直方向，如果在 margin 要設定水平方向就是：

.box{
  margin-inline: 10px;
}

同理在 padding 設定垂直方向就是使用：

.box{
  padding-block: 10px;
}

border 也可以，如果我只想設定上下的邊框，就可以寫成這樣：

.box{
  border-block: 1px solid #aaa;
}

這樣就能讓 CSS 更為精簡了。