使い方
マージンは基本的には独自のマークアップで指定したほうがHTMLがきれいです。
緊急用としての使用推薦。
{margin-left: auto;}と{margin-right: auto;}はflexなどと併用するために用意しています。
.mgn.top8 {margin-top: 8px;}
.mgn.top16 {margin-top: 16px;}
.mgn.top24 {margin-top: 24px;}
.mgn.top32 {margin-top: 32px;}
.mgn.top40 {margin-top: 40px;}
.mgn.top48 {margin-top: 48px;}
.mgn.btm8 {margin-bottom: 8px;}
.mgn.btm16 {margin-bottom: 16px;}
.mgn.btm24 {margin-bottom: 24px;}
.mgn.btm32 {margin-bottom: 32px;}
.mgn.btm40 {margin-bottom: 40px;}
.mgn.btm48 {margin-bottom: 48px;}
.mgn.la {margin-left: auto;}
.mgn.ra {margin-right: auto;}
@media screen and (max-width: 768px) {
.XS_top8 {margin-top: 8px;}
.XS_top16 {margin-top: 16px;}
.XS_top24 {margin-top: 24px;}
.XS_top32 {margin-top: 32px;}
.XS_top40 {margin-top: 40px;}
.XS_top48 {margin-top: 48px;}
.XS_btm8 {margin-bottom: 8px;}
.XS_btm16 {margin-bottom: 16px;}
.XS_btm24 {margin-bottom: 24px;}
.XS_btm32 {margin-bottom: 32px;}
.XS_btm40 {margin-bottom: 40px;}
.XS_btm48 {margin-bottom: 48px;}
}