快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

内边距 Padding

概述

基础组件,触发业务逻辑时使用。

平均内边距

设置类j-padding-*定义容器平均内边距,*为边距尺寸值。如j-padding即代表padding:1rem。类和值的对应关系如下:

类 Class 值 Value
.j-padding-large 2rem
.j-padding-medium 1.5rem
.j-padding 1rem
.j-padding-small 0.5rem
.j-padding-mini 0.3rem
水平内边距

设置类j-padding-x-*定义水平内边距,*为内边距尺寸值。如j-padding-x即代表padding-left:1rem; padding-right:1rem。类和值对应关系如下:

类 Class 值 Value
.j-padding-x-large padding-left: 2rem
padding-right: 2rem
.j-padding-x-medium padding-left: 1.5rem
padding-right: 1.5rem
.j-padding-x padding-left: 1rem
padding-right: 1rem
.j-padding-x-small padding-left: 0.5rem
padding-right: 0.5rem
.j-padding-x-mini padding-left: 0.3rem
padding-right: 0.3rem
垂直内边距

设置类j-padding-y-*定义垂直内边距,*为内边距尺寸值。如j-padding-y即代表padding-top:1rem; padding-bottom:1rem。类和值对应关系如下:

类 Class 值 Value
.j-padding-y-large padding-top: 2rem
padding-bottom: 2rem
.j-padding-y-medium padding-top: 1.5rem
padding-bottom: 1.5rem
.j-padding-y padding-top: 1rem
padding-bottom: 1rem
.j-padding-y-small padding-top: 0.5rem
padding-bottom: 0.5rem
.j-padding-y-mini padding-top: 0.3rem
padding-bottom: 0.3rem
自定义内边距

JUI支持以自定义属性的方式来个性化内边距。包含5种属性:[padding][padding-top][padding-bottom][padding-left][padding-right]。如:

<div padding-top='10' padding-left='15'></div>
顾名思义,即代表该容器具有2个已声明的内边距padding-top: 1rem padding-left: 1.5rem

自定义属性和值对应关系如下:

自定义属性 样式值
[padding='0'] padding: 0
[padding='5'] padding: .5rem
[padding='10'] padding: 1rem
[padding='15'] padding: 1.5rem
[padding='20'] padding: 2rem
[padding='30'] padding: 3rem
[padding='40'] padding: 4rem
[padding='50'] padding: 5rem
[padding-top='5'] padding-top: .5rem
[padding-top='10'] padding-top: 1rem
[padding-top='15'] padding-top: 1.5rem
[padding-top='20'] padding-top: 2rem
[padding-top='30'] padding-top: 3rem
[padding-top='40'] padding-top: 4rem
[padding-top='50'] padding-top: 5rem
[padding-bottom='5'] padding-bottom: .5rem
[padding-bottom='10'] padding-bottom: 1rem
[padding-bottom='15'] padding-bottom: 1.5rem
[padding-bottom='20'] padding-bottom: 2rem
[padding-bottom='30'] padding-bottom: 3rem
[padding-bottom='40'] padding-bottom: 4rem
[padding-bottom='50'] padding-bottom: 5rem
[padding-left='5'] padding-left: .5rem
[padding-left='10'] padding-left: 1rem
[padding-left='15'] padding-left: 1.5rem
[padding-left='20'] padding-left: 2rem
[padding-left='30'] padding-left: 3rem
[padding-left='40'] padding-left: 4rem
[padding-left='50'] padding-left: 5rem
[padding-right='5'] padding-right: .5rem
[padding-right='10'] padding-right: 1rem
[padding-right='15'] padding-right: 1.5rem
[padding-right='20'] padding-right: 2rem
[padding-right='30'] padding-right: 3rem
[padding-right='40'] padding-right: 4rem
[padding-right='50'] padding-right: 5rem
[padding-x='5'] padding: 0 .5rem
[padding-x='10'] padding: 0 1rem
[padding-x='15'] padding: 0 1.5rem
[padding-x='20'] padding: 0 2rem
[padding-x='30'] padding: 0 3rem
[padding-x='40'] padding: 0 4rem
[padding-x='50'] padding: 0 5rem
[padding-y='5'] padding: .5rem 0
[padding-y='10'] padding: 1rem 0
[padding-y='15'] padding: 1.5rem 0
[padding-y='20'] padding: 2rem 0
[padding-y='30'] padding: 3rem 0
[padding-y='40'] padding: 4rem 0
[padding-y='50'] padding: 5rem 0
上一章:外边距 Margin
下一章:溢出 Overflow