Margin 和 Padding 的簡寫

在撰寫 CSS 的時候，我們常會使用到 Margin 和 Padding 來調整元素的位置，
而透過簡寫可以讓我們的 CSS 更加整潔。

Margin 和 Padding 的縮寫方式是相同的，有四種寫法：

1. margin: 10px：margin:上下左右
   同時設定「上下左右」的間距
   

2. margin:10px 20px：margin:上下 左右
   分別設定「上下」和「左右」的間距
   

3. margin:10px 20px 30px：margin:上 左右 下
   分別設定「上」、「左右」和「下」的間距
   

4. margin:10px 30px 40px 20px：margin: 上 右 下 左
   分別設定「上」、「右」、「下」和「左」的間距
   

縮寫練習

練習一

.box{
    margin:10px 20px 30px 20px; /* 上、右、下、左 */
}

按照第三種方法簡化後，可以寫成：

.box{
    margin:10px 20px 30px; /* 上、左右、下 */
}

練習二

.box{
    padding-top:10px;
    padding-bottom:10px;
}

按照第二種方法簡化後，可以寫成：

.box{
    padding:10px 0;  /* 上下、左右 */
}

如果希望了解其他的 CSS 縮寫，可以查看 CSS-Shorthand-Cheat-Sheet.pdf