LwuCSS

Appearance

On this page

间距 ​

外边距 ​

控制元素外边距的功能类

使用前缀 ​

为了防止和开发者项目中的其他原子化样式语法冲突，样式库默认添加了前缀 lwu，使用示例如下：

vue
<view class="lwu-flex"></view>

语法 ​

0-3，步进0.5 ​

ClassProperties平台兼容性说明
m-0margin: 0px;H5、小程序、app-vue、app-nvue
mx-0margin-left: 0px;
margin-right: 0px;		H5、小程序、app-vue、app-nvue
my-0margin-top: 0px;
margin-bottom: 0px;		H5、小程序、app-vue、app-nvue
mt-0margin-top: 0px;
H5、小程序、app-vue、app-nvue
mr-0margin-right: 0px;
H5、小程序、app-vue、app-nvue
mb-0margin-bottom: 0px;
H5、小程序、app-vue、app-nvue
ml-0margin-left: 0px;
H5、小程序、app-vue、app-nvue
m-pxmargin: 1px;H5、小程序、app-vue、app-nvue
mx-pxmargin-left: 1px;
margin-right: 1px;		H5、小程序、app-vue、app-nvue
my-pxmargin-top: 1px;
margin-bottom: 1px;		H5、小程序、app-vue、app-nvue
mt-pxmargin-top: 1px;
H5、小程序、app-vue、app-nvue
mr-pxmargin-right: 1px;
H5、小程序、app-vue、app-nvue
mb-pxmargin-bottom: 1px;
H5、小程序、app-vue、app-nvue
ml-pxmargin-left: 1px;
H5、小程序、app-vue、app-nvue
m-0.5margin: 0.125 * 1rem;H5、小程序、app-vue
mx-0.5margin-left: 0.125 * 1rem;
margin-right: 0.125 * 1rem;		H5、小程序、app-vue、app-nvue
my-0.5margin-top: 0.125 * 1rem;
margin-bottom: 0.125 * 1rem;		H5、小程序、app-vue、app-nvue
mt-0.5margin-top: 0.125 * 1rem;H5、小程序、app-vue、app-nvue
mr-0.5margin-right: 0.125 * 1rem;H5、小程序、app-vue、app-nvue
mb-0.5margin-bottom: 0.125 * 1rem;H5、小程序、app-vue、app-nvue
ml-0.5margin-left: 0.125 * 1rem;H5、小程序、app-vue、app-nvue
m-1margin: 0.25 * 1rem;H5、小程序、app-vue、app-nvue
mx-1margin-left: 0.25 * 1rem;
margin-right: 0.25 * 1rem;		H5、小程序、app-vue、app-nvue
my-1margin-top: 0.25 * 1rem;
margin-bottom: 0.25 * 1rem;		H5、小程序、app-vue、app-nvue
mt-1margin-top: 0.25 * 1rem;H5、小程序、app-vue、app-nvue
mr-1margin-right: 0.25 * 1rem;H5、小程序、app-vue、app-nvue
mb-1margin-bottom: 0.25 * 1rem;H5、小程序、app-vue、app-nvue
ml-1margin-left: 0.25 * 1rem;H5、小程序、app-vue、app-nvue
m-1.5margin: 0.375 * 1rem;H5、小程序、app-vue、app-nvue
mx-1.5margin-left: 0.375 * 1rem;
margin-right: 0.375 * 1rem;		H5、小程序、app-vue、app-nvue
my-1.5margin-top: 0.375 * 1rem;
margin-bottom: 0.375 * 1rem;		H5、小程序、app-vue、app-nvue
mt-1.5margin-top: 0.375 * 1rem;
H5、小程序、app-vue、app-nvue
mr-1.5margin-right: 0.375 * 1rem;
H5、小程序、app-vue、app-nvue
mb-1.5margin-bottom: 0.375 * 1rem;
H5、小程序、app-vue、app-nvue
ml-1.5margin-left: 0.375 * 1rem;
H5、小程序、app-vue、app-nvue
m-2margin: 0.5 * 1rem;H5、小程序、app-vue、app-nvue
mx-2margin-left: 0.5 * 1rem;
margin-right: 0.5 * 1rem;		H5、小程序、app-vue、app-nvue
my-2margin-top: 0.5 * 1rem;
margin-bottom: 0.5 * 1rem;		H5、小程序、app-vue、app-nvue
mt-2margin-top: 0.5 * 1rem;
H5、小程序、app-vue、app-nvue
mr-2margin-right: 0.5 * 1rem;
H5、小程序、app-vue、app-nvue
mb-2margin-bottom: 0.5 * 1rem;
H5、小程序、app-vue、app-nvue
ml-2margin-left: 0.5 * 1rem;
H5、小程序、app-vue、app-nvue
m-2.5margin: 0.625 * 1rem;H5、小程序、app-vue、app-nvue
mx-2.5margin-left: 0.625 * 1rem;
margin-right: 0.625 * 1rem;		H5、小程序、app-vue、app-nvue
my-2.5margin-top: 0.625 * 1rem;
margin-bottom: 0.625 * 1rem;		H5、小程序、app-vue、app-nvue
mt-2.5margin-top: 0.625 * 1rem;
H5、小程序、app-vue、app-nvue
mr-2.5margin-right: 0.625 * 1rem;
H5、小程序、app-vue、app-nvue
mb-2.5margin-bottom: 0.625 * 1rem;
H5、小程序、app-vue、app-nvue
ml-2.5margin-left: 0.625 * 1rem;
H5、小程序、app-vue、app-nvue
m-3margin: 0.75 * 1rem;H5、小程序、app-vue、app-nvue
mx-3margin-left: 0.75 * 1rem;
margin-right: 0.75 * 1rem;		H5、小程序、app-vue、app-nvue
my-3margin-top: 0.75 * 1rem;
margin-bottom: 0.75 * 1rem;		H5、小程序、app-vue、app-nvue
mt-3margin-top: 0.75 * 1rem;
H5、小程序、app-vue、app-nvue
mr-3margin-right: 0.75 * 1rem;
H5、小程序、app-vue、app-nvue
mb-3margin-bottom: 0.75 * 1rem;
H5、小程序、app-vue、app-nvue
ml-3margin-left: 0.75 * 1rem;
H5、小程序、app-vue、app-nvue
m-3.5margin: 0.875 * 1rem;H5、小程序、app-vue、app-nvue
mx-3.5margin-left: 0.875 * 1rem;
margin-right: 0.875 * 1rem;		H5、小程序、app-vue、app-nvue
my-3.5margin-top: 0.875 * 1rem;
margin-bottom: 0.875 * 1rem;		H5、小程序、app-vue、app-nvue
mt-3.5margin-top: 0.875 * 1rem;
H5、小程序、app-vue、app-nvue
mr-3.5margin-right: 0.875 * 1rem;
H5、小程序、app-vue、app-nvue
mb-3.5margin-bottom: 0.875 * 1rem;
H5、小程序、app-vue、app-nvue
ml-3.5margin-left: 0.875 * 1rem;
H5、小程序、app-vue、app-nvue

4-12，步进1 ​

ClassProperties平台兼容性说明
m-4margin: 1rem;H5、小程序、app-vue、app-nvue
mx-4margin-left: 1rem;
margin-right: 1rem;		H5、小程序、app-vue、app-nvue
my-4margin-top: 1rem;
margin-bottom: 1rem;		H5、小程序、app-vue、app-nvue
mt-4margin-top: 1rem;
H5、小程序、app-vue、app-nvue
mr-4margin-right: 1rem;
H5、小程序、app-vue、app-nvue
mb-4margin-bottom: 1rem;
H5、小程序、app-vue、app-nvue
ml-4margin-left: 1rem;
H5、小程序、app-vue、app-nvue
m-5margin: 1.25rem;H5、小程序、app-vue、app-nvue
mx-5margin-left: 1.25rem;
margin-right: 1.25rem;		H5、小程序、app-vue、app-nvue
my-5margin-top: 1.25rem;
margin-bottom: 1.25rem;		H5、小程序、app-vue、app-nvue
mt-5margin-top: 1.25rem;
H5、小程序、app-vue、app-nvue
mr-5margin-right: 1.25rem;
H5、小程序、app-vue、app-nvue
mb-5margin-bottom: 1.25rem;
H5、小程序、app-vue、app-nvue
ml-5margin-left: 1.25rem;
H5、小程序、app-vue、app-nvue
m-6margin: 1.5rem;H5、小程序、app-vue、app-nvue
mx-6margin-left: 1.5rem;
margin-right: 1.5rem;		H5、小程序、app-vue、app-nvue
my-6margin-top: 1.5rem;
margin-bottom: 1.5rem;		H5、小程序、app-vue、app-nvue
mt-6margin-top: 1.5rem;
H5、小程序、app-vue、app-nvue
mr-6margin-right: 1.5rem;
H5、小程序、app-vue、app-nvue
mb-6margin-bottom: 1.5rem;
H5、小程序、app-vue、app-nvue
ml-6margin-left: 1.5rem;
H5、小程序、app-vue、app-nvue
m-7margin: 1.75rem;H5、小程序、app-vue、app-nvue
mx-7margin-left: 1.75rem;
margin-right: 1.75rem;		H5、小程序、app-vue、app-nvue
my-7margin-top: 1.75rem;
margin-bottom: 1.75rem;		H5、小程序、app-vue、app-nvue
mt-7margin-top: 1.75rem;
H5、小程序、app-vue、app-nvue
mr-7margin-right: 1.75rem;
H5、小程序、app-vue、app-nvue
mb-7margin-bottom: 1.75rem;
H5、小程序、app-vue、app-nvue
ml-7margin-left: 1.75rem;
H5、小程序、app-vue、app-nvue
m-8margin: 2rem;H5、小程序、app-vue、app-nvue
mx-8margin-left: 2rem;
margin-right: 2rem;		H5、小程序、app-vue、app-nvue
my-8margin-top: 2rem;
margin-bottom: 2rem;		H5、小程序、app-vue、app-nvue
mt-8margin-top: 2rem;
H5、小程序、app-vue、app-nvue
mr-8margin-right: 2rem;
H5、小程序、app-vue、app-nvue
mb-8margin-bottom: 2rem;
H5、小程序、app-vue、app-nvue
ml-8margin-left: 2rem;
H5、小程序、app-vue、app-nvue
m-9margin: 2.25rem;H5、小程序、app-vue、app-nvue
mx-9margin-left: 2.25rem;
margin-right: 2.25rem;		H5、小程序、app-vue、app-nvue
my-9margin-top: 2.25rem;
margin-bottom: 2.25rem;		H5、小程序、app-vue、app-nvue
mt-9margin-top: 2.25rem;
H5、小程序、app-vue、app-nvue
mr-9margin-right: 2.25rem;
H5、小程序、app-vue、app-nvue
mb-9margin-bottom: 2.25rem;
H5、小程序、app-vue、app-nvue
ml-9margin-left: 2.25rem;
H5、小程序、app-vue、app-nvue
m-10margin: 2.5rem;H5、小程序、app-vue、app-nvue
mx-10margin-left: 2.5rem;
margin-right: 2.5rem;		H5、小程序、app-vue、app-nvue
my-10margin-top: 2.5rem;
margin-bottom: 2.5rem;		H5、小程序、app-vue、app-nvue
mt-10margin-top: 2.5rem;
H5、小程序、app-vue、app-nvue
mr-10margin-right: 2.5rem;
H5、小程序、app-vue、app-nvue
mb-10margin-bottom: 2.5rem;
H5、小程序、app-vue、app-nvue
ml-10margin-left: 2.5rem;
H5、小程序、app-vue、app-nvue
m-11margin: 2.75rem;H5、小程序、app-vue、app-nvue
mx-11margin-left: 2.75rem;
margin-right: 2.75rem;		H5、小程序、app-vue、app-nvue
my-11margin-top: 2.75rem;
margin-bottom: 2.75rem;		H5、小程序、app-vue、app-nvue
mt-11margin-top: 2.75rem;
H5、小程序、app-vue、app-nvue
mr-11margin-right: 2.75rem;
H5、小程序、app-vue、app-nvue
mb-11margin-bottom: 2.75rem;
H5、小程序、app-vue、app-nvue
ml-11margin-left: 2.75rem;
H5、小程序、app-vue、app-nvue
m-12margin: 3rem;H5、小程序、app-vue、app-nvue
mx-12margin-left: 3rem;
margin-right: 3rem;		H5、小程序、app-vue、app-nvue
my-12margin-top: 3rem;
margin-bottom: 3rem;		H5、小程序、app-vue、app-nvue
mt-12margin-top: 3rem;
H5、小程序、app-vue、app-nvue
mr-12margin-right: 3rem;
H5、小程序、app-vue、app-nvue
mb-12margin-bottom: 3rem;
H5、小程序、app-vue、app-nvue
ml-12margin-left: 3rem;
H5、小程序、app-vue、app-nvue

14 ​

ClassProperties平台兼容性说明
m-14margin: 3.5rem;H5、小程序、app-vue、app-nvue
mx-14margin-left: 3.5rem;
margin-right: 3.5rem;		H5、小程序、app-vue、app-nvue
my-14margin-top: 3.5rem;
margin-bottom: 3.5rem;		H5、小程序、app-vue、app-nvue
mt-14margin-top: 3.5rem;
H5、小程序、app-vue、app-nvue
mr-14margin-right: 3.5rem;
H5、小程序、app-vue、app-nvue
mb-14margin-bottom: 3.5rem;
H5、小程序、app-vue、app-nvue
ml-14margin-left: 3.5rem;
H5、小程序、app-vue、app-nvue

16-64，进步4 ​

ClassProperties平台兼容性说明
m-16margin: 4rem;H5、小程序、app-vue、app-nvue
mx-16margin-left: 4rem;
margin-right: 4rem;		H5、小程序、app-vue、app-nvue
my-16margin-top: 4rem;
margin-bottom: 4rem;		H5、小程序、app-vue、app-nvue
mt-16margin-top: 4rem;
H5、小程序、app-vue、app-nvue
mr-16margin-right: 4rem;
H5、小程序、app-vue、app-nvue
mb-16margin-bottom: 4rem;
H5、小程序、app-vue、app-nvue
ml-16margin-left: 4rem;
H5、小程序、app-vue、app-nvue
m-20margin: 5rem;H5、小程序、app-vue、app-nvue
mx-20margin-left: 5rem;
margin-right: 5rem;		H5、小程序、app-vue、app-nvue
my-20margin-top: 5rem;
margin-bottom: 5rem;		H5、小程序、app-vue、app-nvue
mt-20margin-top: 5rem;
H5、小程序、app-vue、app-nvue
mr-20margin-right: 5rem;
H5、小程序、app-vue、app-nvue
mb-20margin-bottom: 5rem;
H5、小程序、app-vue、app-nvue
ml-20margin-left: 5rem;
H5、小程序、app-vue、app-nvue
m-24margin: 6rem;H5、小程序、app-vue、app-nvue
mx-24margin-left: 6rem;
margin-right: 6rem;		H5、小程序、app-vue、app-nvue
my-24margin-top: 6rem;
margin-bottom: 6rem;		H5、小程序、app-vue、app-nvue
mt-24margin-top: 6rem;
H5、小程序、app-vue、app-nvue
mr-24margin-right: 6rem;
H5、小程序、app-vue、app-nvue
mb-24margin-bottom: 6rem;
H5、小程序、app-vue、app-nvue
ml-24margin-left: 6rem;
H5、小程序、app-vue、app-nvue
m-28margin: 7rem;H5、小程序、app-vue、app-nvue
mx-28margin-left: 7rem;
margin-right: 7rem;		H5、小程序、app-vue、app-nvue
my-28margin-top: 7rem;
margin-bottom: 7rem;		H5、小程序、app-vue、app-nvue
mt-28margin-top: 7rem;
H5、小程序、app-vue、app-nvue
mr-28margin-right: 7rem;
H5、小程序、app-vue、app-nvue
mb-28margin-bottom: 7rem;
H5、小程序、app-vue、app-nvue
ml-28margin-left: 7rem;
H5、小程序、app-vue、app-nvue
m-32margin: 8rem;H5、小程序、app-vue、app-nvue
mx-32margin-left: 8rem;
margin-right: 8rem;		H5、小程序、app-vue、app-nvue
my-32margin-top: 8rem;
margin-bottom: 8rem;		H5、小程序、app-vue、app-nvue
mt-32margin-top: 8rem;
H5、小程序、app-vue、app-nvue
mr-32margin-right: 8rem;
H5、小程序、app-vue、app-nvue
mb-32margin-bottom: 8rem;
H5、小程序、app-vue、app-nvue
ml-32margin-left: 8rem;
H5、小程序、app-vue、app-nvue
m-36margin: 9rem;H5、小程序、app-vue、app-nvue
mx-36margin-left: 9rem;
margin-right: 9rem;		H5、小程序、app-vue、app-nvue
my-36margin-top: 9rem;
margin-bottom: 9rem;		H5、小程序、app-vue、app-nvue
mt-36margin-top: 9rem;
H5、小程序、app-vue、app-nvue
mr-36margin-right: 9rem;
H5、小程序、app-vue、app-nvue
mb-36margin-bottom: 9rem;
H5、小程序、app-vue、app-nvue
ml-36margin-left: 9rem;
H5、小程序、app-vue、app-nvue
m-40margin: 10rem;H5、小程序、app-vue、app-nvue
mx-40margin-left: 10rem;
margin-right: 10rem;		H5、小程序、app-vue、app-nvue
my-40margin-top: 10rem;
margin-bottom: 10rem;		H5、小程序、app-vue、app-nvue
mt-40margin-top: 10rem;
H5、小程序、app-vue、app-nvue
mr-40margin-right: 10rem;
H5、小程序、app-vue、app-nvue
mb-40margin-bottom: 10rem;
H5、小程序、app-vue、app-nvue
ml-40margin-left: 10rem;
H5、小程序、app-vue、app-nvue
m-44margin: 11rem;H5、小程序、app-vue、app-nvue
mx-44margin-left: 11rem;
margin-right: 11rem;		H5、小程序、app-vue、app-nvue
my-44margin-top: 11rem;
margin-bottom: 11rem;		H5、小程序、app-vue、app-nvue
mt-44margin-top: 11rem;
H5、小程序、app-vue、app-nvue
mr-44margin-right: 11rem;
H5、小程序、app-vue、app-nvue
mb-44margin-bottom: 11rem;
H5、小程序、app-vue、app-nvue
ml-44margin-left: 11rem;
H5、小程序、app-vue、app-nvue
m-48margin: 12rem;H5、小程序、app-vue、app-nvue
mx-48margin-left: 12rem;
margin-right: 12rem;		H5、小程序、app-vue、app-nvue
my-48margin-top: 12rem;
margin-bottom: 12rem;		H5、小程序、app-vue、app-nvue
mt-48margin-top: 12rem;
H5、小程序、app-vue、app-nvue
mr-48margin-right: 12rem;
H5、小程序、app-vue、app-nvue
mb-48margin-bottom: 12rem;
H5、小程序、app-vue、app-nvue
ml-48margin-left: 12rem;
H5、小程序、app-vue、app-nvue
m-52margin: 13rem;H5、小程序、app-vue、app-nvue
mx-52margin-left: 13rem;
margin-right: 13rem;		H5、小程序、app-vue、app-nvue
my-52margin-top: 13rem;
margin-bottom: 13rem;		H5、小程序、app-vue、app-nvue
mt-52margin-top: 13rem;
H5、小程序、app-vue、app-nvue
mr-52margin-right: 13rem;
H5、小程序、app-vue、app-nvue
mb-52margin-bottom: 13rem;
H5、小程序、app-vue、app-nvue
ml-52margin-left: 13rem;
H5、小程序、app-vue、app-nvue
m-56margin: 14rem;H5、小程序、app-vue、app-nvue
mx-56margin-left: 14rem;
margin-right: 14rem;		H5、小程序、app-vue、app-nvue
my-56margin-top: 14rem;
margin-bottom: 14rem;		H5、小程序、app-vue、app-nvue
mt-56margin-top: 14rem;
H5、小程序、app-vue、app-nvue
mr-56margin-right: 14rem;
H5、小程序、app-vue、app-nvue
mb-56margin-bottom: 14rem;
H5、小程序、app-vue、app-nvue
ml-56margin-left: 14rem;
H5、小程序、app-vue、app-nvue
m-60margin: 15rem;H5、小程序、app-vue、app-nvue
mx-60margin-left: 15rem;
margin-right: 15rem;		H5、小程序、app-vue、app-nvue
my-60margin-top: 15rem;
margin-bottom: 15rem;		H5、小程序、app-vue、app-nvue
mt-60margin-top: 15rem;
H5、小程序、app-vue、app-nvue
mr-60margin-right: 15rem;
H5、小程序、app-vue、app-nvue
mb-60margin-bottom: 15rem;
H5、小程序、app-vue、app-nvue
ml-60margin-left: 15rem;
H5、小程序、app-vue、app-nvue
m-64margin: 16rem;H5、小程序、app-vue、app-nvue
mx-64margin-left: 16rem;
margin-right: 16rem;		H5、小程序、app-vue、app-nvue
my-64margin-top: 16rem;
margin-bottom: 16rem;		H5、小程序、app-vue、app-nvue
mt-64margin-top: 16rem;
H5、小程序、app-vue、app-nvue
mr-64margin-right: 16rem;
H5、小程序、app-vue、app-nvue
mb-64margin-bottom: 16rem;
H5、小程序、app-vue、app-nvue
ml-64margin-left: 16rem;
H5、小程序、app-vue、app-nvue

72、80、96 ​

ClassProperties平台兼容性说明
m-72margin: 18rem;H5、小程序、app-vue、app-nvue
mx-72margin-left: 18rem;
margin-right: 18rem;		H5、小程序、app-vue、app-nvue
my-72margin-top: 18rem;
margin-bottom: 18rem;		H5、小程序、app-vue、app-nvue
mt-72margin-top: 18rem;
H5、小程序、app-vue、app-nvue
mr-72margin-right: 18rem;
H5、小程序、app-vue、app-nvue
mb-72margin-bottom: 18rem;
H5、小程序、app-vue、app-nvue
ml-72margin-left: 18rem;
H5、小程序、app-vue、app-nvue
m-80margin: 20rem;H5、小程序、app-vue、app-nvue
mx-80margin-left: 20rem;
margin-right: 20rem;		H5、小程序、app-vue、app-nvue
my-80margin-top: 20rem;
margin-bottom: 20rem;		H5、小程序、app-vue、app-nvue
mt-80margin-top: 20rem;
H5、小程序、app-vue、app-nvue
mr-80margin-right: 20rem;
H5、小程序、app-vue、app-nvue
mb-80margin-bottom: 20rem;
H5、小程序、app-vue、app-nvue
ml-80margin-left: 20rem;
H5、小程序、app-vue、app-nvue
m-96margin: 24rem;H5、小程序、app-vue、app-nvue
mx-96margin-left: 24rem;
margin-right: 24rem;		H5、小程序、app-vue、app-nvue
my-96margin-top: 24rem;
margin-bottom: 24rem;		H5、小程序、app-vue、app-nvue
mt-96margin-top: 24rem;
H5、小程序、app-vue、app-nvue
mr-96margin-right: 24rem;
H5、小程序、app-vue、app-nvue
mb-96margin-bottom: 24rem;
H5、小程序、app-vue、app-nvue
ml-96margin-left: 24rem;
H5、小程序、app-vue、app-nvue