css中margin-inline、margin-block、border-inline、border-block、inset-inline、inset-block邏輯屬性解析

其中的inline、block指的是方向，start和end指的是開始結(jié)束的方位

1. 例如margin-inline指的就是margin-inline-start和margin-inline-end的簡寫
2. 例如margin-block指的就是margin-block-start和margin-block-end的簡寫

如果內(nèi)聯(lián)元素排列方向是水平方向且從左往右排列，margin-inline-start，start對應(yīng)的就是左側(cè)，margin-inline-end，end對應(yīng)的就是右側(cè)

• 如果設(shè)置direction:rtl，那么水平文檔流就是從右往左排列，start對應(yīng)的就是右側(cè)，end對應(yīng)的就是左側(cè)
• 如果設(shè)置writing-mode:vertical-rl屬性把文檔流改為垂直且從右往左排列，此時內(nèi)聯(lián)元素就是從上往下排列的，因此，inline就是垂直方向，block就是水平方向

大部分情況下，文檔流方向是不會改變的，下面就按照默認的文檔流方向舉例，來簡寫css屬性

1. 水平方向上

   padding-left: 20px;
   padding-right: 20px;
   

   可以簡寫為

   padding-inline: 20px;
   

   margin-inlne也類似
2. 垂直方向上

   margin-top: 20px;
   margin-bottom: 20px;
   

   可以簡寫為

   margin-block: 20px;
   

   padding-block也類似
3. border垂直方向上的簡寫

   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   

   可以簡寫為

   border-block: 1px solid #ddd;
   

4. border水平方向上的簡寫

   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   

   可以簡寫為

   border-inline: 1px solid #ddd;
   

5. inset簡寫

   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   

   可以簡寫為

   position: fixed;
   inset: 0;
   

   也可以簡寫為

   position: fixed;
   inset-inline: 0;
   inset-block: 0;
   

   • inset-inline代表水平方向上的left、right
   • inset-block代表水平方向上的top、bottom