前端页面默认间距偏大影响体验,需调整行高至1.3、段间距为4px;标题需单独调margin;卡片内边距设为0;表单按钮外边距统一设为上下2px、左右4px,并用CSS控制按钮组间隔。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在码上飞AI生成的前端页面中,文字、按钮、卡片等元素默认间距偏大,导致界面松散、信息密度低,影响移动端阅读体验和后台管理效率。
调整全局行高与段落间距
进入「项目设置」→「样式配置」→「基础排版」,将【行高】从默认的1.6改为1.3;段前/段后间距统一设为4px。这一步直接影响所有文本块的垂直压缩程度,改完后预览会立刻看到标题与正文、列表项之间的空隙明显收窄。
注意:若页面含多级标题(如H1/H2/H3),需单独进入「组件样式」→「标题组件」下调各层级的margin-top/margin-bottom,否则H2仍会继承全局较大间距。
禁用卡片与容器的默认内边距
方法一:选中任意卡片组件 → 右侧属性面板 → 找到「内边距」→ 点击「自定义」→ 将上、右、下、左四值全部设为0px。
方法二:在「全局CSS覆盖」中添加:.card { padding: 0 !important; }。该写法可批量清除所有卡片内边距,但【仅对未手动修改过padding的卡片生效】,已手动设过值的需先点击「重置为默认」再应用。
精简表单与按钮组间距
第一步:选中表单容器 → 属性面板中关闭「自动间距」开关。
第二步:逐个选中内部输入框、下拉框、按钮 → 在「布局」选项卡中,将「上下外边距」统一设为2px,「左右外边距」设为4px。
第三步:若使用「按钮组」组件,双击进入编辑 → 删除默认插入的间隔符(spacer),改用CSS控制:.btn-group .btn + .btn { margin-left: 6px; }。这样能避免拖拽式间隔符在响应式断点下错位。














