CSS 实用类

样式

类名 效果
.iform-card 使 el-card 组件样式跟随主题变化
  • .iform-card 示例
<el-card shadow="never" class="iform-card">
  <template slot="header">header</template>
  body
</el-card>
<!-- 快看 我的边框和 header 边框会随着主题切换样式！ -->

文字

类名 效果
.iform-text-center 文字水平居中

浮动

类名 效果
.iform-fl 左浮动
.iform-fr 右浮动

边距

类名 效果
.iform-m-0 外边距 0px
.iform-mt-0 上外边距 0px
.iform-mr-0 右外边距 0px
.iform-mb-0 下外边距 0px
.iform-ml-0 左外边距 0px
.iform-p-0 内边距 0px
.iform-pt-0 上内边距 0px
.iform-pr-0 右内边距 0px
.iform-pb-0 下内边距 0px
.iform-pl-0 左内边距 0px
.iform-m-5 外边距 5px
.iform-mt-5 上外边距 5px
.iform-mr-5 右外边距 5px
.iform-mb-5 下外边距 5px
.iform-ml-5 左外边距 5px
.iform-p-5 内边距 5px
.iform-pt-5 上内边距 5px
.iform-pr-5 右内边距 5px
.iform-pb-5 下内边距 5px
.iform-pl-5 左内边距 5px
.iform-m-10 外边距 10px
.iform-mt-10 上外边距 10px
.iform-mr-10 右外边距 10px
.iform-mb-10 下外边距 10px
.iform-ml-10 左外边距 10px
.iform-p-10 内边距 10px
.iform-pt-10 上内边距 10px
.iform-pr-10 右内边距 10px
.iform-pb-10 下内边距 10px
.iform-pl-10 左内边距 10px
.iform-m-15 外边距 15px
.iform-mt-15 上外边距 15px
.iform-mr-15 右外边距 15px
.iform-mb-15 下外边距 15px
.iform-ml-15 左外边距 15px
.iform-p-15 内边距 15px
.iform-pt-15 上内边距 15px
.iform-pr-15 右内边距 15px
.iform-pb-15 下内边距 15px
.iform-pl-15 左内边距 15px
.iform-m-20 外边距 20px
.iform-mt-20 上外边距 20px
.iform-mr-20 右外边距 20px
.iform-mb-20 下外边距 20px
.iform-ml-20 左外边距 20px
.iform-p-20 内边距 20px
.iform-pt-20 上内边距 20px
.iform-pr-20 右内边距 20px
.iform-pb-20 下内边距 20px
.iform-pl-20 左内边距 20px

边距简写

20px 设定为通用边距 可以如下简写

类名 效果
.iform-m 外边距 20px
.iform-mt 上外边距 20px
.iform-mr 右外边距 20px
.iform-mb 下外边距 20px
.iform-ml 左外边距 20px
.iform-p 内边距 20px
.iform-pt 上内边距 20px
.iform-pr 右内边距 20px
.iform-pb 下内边距 20px
.iform-pl 左内边距 20px
作者：hugh  创建时间：2023-12-25 15:11
最后编辑：hugh  更新时间：2025-10-24 18:04