@meizhou/atomcss

Appearance

margin ​

class名
样式值
m-10
margin:10px;
m-10.5
margin:10.5px;
m-4-40
margin:4px 40px;
m-0-auto
margin:0px auto;
m-4-40-0-9
margin:4px 40px 0px 9px;
mt-20
margin-top:20px;
mt--20
margin-top:-20px;
mb-20
margin-bottom:20px;
ml-20
margin-left:20px;
mr-20
margin-right:20px;
mlr-20
margin-left:20px;margin-right:20px;
mtb-20
margin-top:20px;margin-bottom:20px;
mtb-20.5
margin-top:20.5px;margin-bottom:20.5px;

使用示例 ​

js
class='m-10' => 'margin:10px;'

class='m-4-40' => 'margin:4px 40px;'
class='m-10-auto' => 'margin:10px auto;'
class='m-auto-10' => 'margin:auto 10px;'
class='m-4-40-0-9' => 'margin:4px 40px 0px 9px;'

class='mt-20' => 'margin-top:20px;'
class='mb-20' => 'margin-bottom:20px;'
class='ml-20' => 'margin-left:20px;'
class='mr-20' => 'margin-right:20px;'
class='mlr-20' => 'margin-left:20px;margin-right:20px;'
class='mtb-20' => 'margin-top:20px;margin-bottom:20px;'

class='mtb-20.5' => 'margin-top:20.5px;margin-bottom:20.5px;'
class='m-10' => 'margin:10px;'

class='m-4-40' => 'margin:4px 40px;'
class='m-10-auto' => 'margin:10px auto;'
class='m-auto-10' => 'margin:auto 10px;'
class='m-4-40-0-9' => 'margin:4px 40px 0px 9px;'

class='mt-20' => 'margin-top:20px;'
class='mb-20' => 'margin-bottom:20px;'
class='ml-20' => 'margin-left:20px;'
class='mr-20' => 'margin-right:20px;'
class='mlr-20' => 'margin-left:20px;margin-right:20px;'
class='mtb-20' => 'margin-top:20px;margin-bottom:20px;'

class='mtb-20.5' => 'margin-top:20.5px;margin-bottom:20.5px;'