margin缩写

CSS样式上下、左右、上下左右缩写简写优化

一、记忆要领：
上(top)
左(left) 右(right)
下(bottom)
按照上面图形：顺时针排序
即为 margin: top right bottom left

二、举例说明

1. top right bottom left（值都不同）
   margin-top: 10px;
   margin-right: 20px;
   margin-bottom:30px;
   margin-left: 40px;
   缩写：margin:10px 20px 30px 40px;

2. top right bottom left（值相同）
   margin-top: 10px;
   margin-right: 10px;
   margin-bottom:10px;
   margin-left: 10px;
   缩写：margin:10px;

3. top right bottom left （right left 值相同 ）
   margin-top: 10px;
   margin-right: 20px;
   margin-bottom:30px;
   margin-left: 20px;
   缩写：margin:10px 20px 30px;
   附加：
   原始：margin-top:5px; margin-bottom:6px; margin-left:4px
   缩写：margin:5px 0 6px 4px或margin:5px auto 6px 4px

4. top right bottom left （top bottom 值相同 无）
   margin-top: 10px;
   margin-right: 20px;
   margin-bottom:10px;
   margin-left:30px;
   缩写：margin:10px 20px 30px;
   说明：应该没有此类缩写，上下一样有点不可实现上下一样的话就是垂直居中了对吧？不然和第3点缩写后都是3个值，看不出来是左右相同还是上下相同的缩写
   有不对的地方欢迎大家指正！

5. top right bottom left （top 和bottom 值相同，right 和left 值相同 ）
   margin-top: 10px;
   margin-right: 20px;
   margin-bottom:10px;
   margin-left:20px;
   缩写：margin:10px 20px;
   附加：
   margin:0 auto;横向居中； （上下为0，左右自动，则水平居中）
   margin：auto 0；纵向居中；（左右为0，上下为0，则垂直居中

padding的距离设置缩写同理哦

作者：一笑倾城Tan
链接：https://www.jianshu.com/p/cd14bbb3748a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。