font-size=0的妙用，解决div塌陷

最新推荐文章于 2023-08-05 18:15:00 发布

南城夏季

最新推荐文章于 2023-08-05 18:15:00 发布

阅读量871

点赞数 1

CC 4.0 BY-SA版权

分类专栏：布局

本文链接：https://blog.youkuaiyun.com/weixin_39818813/article/details/79745065

布局专栏收录该内容

24 篇文章

订阅专栏

本文介绍了解决轮播图中图片由于排版原因出现的塌陷问题，提供了五种有效的方法，包括设置父元素字体大小为0、消除换行符、使用负margin值、应用浮动以及调整letter-spacing和word-spacing。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写轮播图的时候发现，在设置图片宽度时，第二张图片会塌陷到下面去，其实是出于排版的原因两个div之间留下了空白字符，才导致两个div元素之间留有间距，导致图片塌陷。

另外，display：inline-block的元素之间会有一个字符的间隙，这个间隙导致了最后一个会掉下来。

解决方法：

1、给父元素设置font-size ： 0 p x；--------推荐
2、取消掉换行符，如这样：<span>a</span><span> a</span>< span>a</span>连续。

或者

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

3、使用margin负值。
4、使用浮动。
5、另外还有使用letter-spacing、word-spacing等方法。

虽然不换行可以暂时解决这一问题，但是肯定有更好的方法。在父类中设置font-size:0就可以完美地解决这个空白间距问题。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

南城夏季

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

font-size:0的作用

liubangbo的专栏

05-08

434

文章转自：https://www.cnblogs.com/guagnxu/p/6382163.html 看别人的代码看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下： html： <div class="box"> <div>...

font-size = 0 的作用

物以稀为贵yeah

06-21

3177

问题的根源是 inline（a标签默认是display:inline）和 inline-block (.list 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响。这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下： HTML<div class="box"> <div>1<

1 条评论您还未登录，请先登录后发表或查看评论

font-size: 0的作用

weixin_58691935的博客

02-28

875

消除内联元素间的间隔（空格）。还可以设置父元素display:table，或者设置子元素margin为负值、设置float等，但后面几种方法弊端明显： table布局影响性能； margin为负值难以调试易出现奇奇怪怪的不符合预期的显示；设置float会让元素脱离文档流；所以设置父级font-size为0是比较不错的选择。

font-size：0

Daisy

05-06

877

在项目中常常会碰到要并列一排的 inline-block，然而他们会天然存在间隔，通过font-size:0 可以解决这个问题。 .box width: 1000px; height: 60px; border: 1px solid #ccc; div display: inline-block; ...

03-20

嗯，用户给了一段Vue的模板代码，然后说当窗口缩小后，两个块的位置会错乱，特别是那个有`el-select`的`div`和右边的另一个`div`。用户希望在我的代码基础上修改，解决布局问题。首先，我需要仔细看看用户提供的代码...

<template> <div> <el-dialog title="设备导入" :visible.sync="dialogVisible" width="600px" custom-class="ota-dialog" :close-on-click-modal="false" > <div class="dialog-content"> <div class="action-section"> <div class="upload-section"> <el-upload action="#" :auto-upload="false" :before-upload="beforeUpload" :on-change="handleFileChange" :limit="1" :on-exceed="handleExceed" :file-list="fileList" drag > <i class="el-icon-upload"></i> <div class="el-upload__text"> <div>点击或拖拽文件到此处上传</div> <div class="el-upload__tip">支持.xlsx、.xls格式文件</div> </div> </el-upload> <div v-if="fileList.length" class="file-card"> <div class="file-info"> <i class="el-icon-document"></i> <div class="file-details"> <div class="file-name">{{ fileList[0].name }}</div> <div class="file-size">{{ formatFileSize(fileList[0].size) }}</div> <div v-if="firstRowString" class="file-data"> <el-tooltip effect="dark" :content="firstRowString" placement="top"> <span>首行数据: {{ truncateString(firstRowString) }}</span> </el-tooltip> </div> </div> </div> <div class="file-actions"> <i v-if="loading" class="el-icon-loading"></i> <el-button v-else type="danger" icon="el-icon-delete" circle @click="clearFile" ></el-button> </div> </div> </div> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleConfirm" :disabled="!fileList.length || loading" > {{ loading ? '处理中...' : '确定' }} </el-button> </div> </el-dialog> </div> </template> <script> import * as XLSX from 'xlsx'; export default { data() { return { dialogVisible: false, fileList: [], firstRowString: '', loading: false }; }, methods: { init() { this.dialogVisible = true; this.fileList = []; this.firstRowString = ''; }, beforeUpload(file) { const isValidType = [ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel' ].includes(file.type); if (!isValidType) { this.$message.error('请上传Excel格式的文件 (.xlsx 或 .xls)'); } return isValidType; }, // 处理文件选择变化 handleFileChange(file) { if (!file) return; const validTypes = [ 'application/vnd.ms-excel', // .xls 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // .xlsx ]; if (!validTypes.includes(file.raw.type)) { this.$message.error('请上传Excel格式的文件 (.xlsx 或 .xls)'); this.clearFile(); return; } this.fileList = [file]; this.readExcelFirstRow(file.raw); }, // 读取Excel文件第一行 readExcelFirstRow(file) { this.loading = true; const reader = new FileReader(); reader.onload = (e) => { try { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个工作表 const firstSheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[firstSheetName]; // 获取第一行数据 const range = XLSX.utils.decode_range(worksheet['!ref']); const firstRow = []; // 遍历第一行的所有列 for (let col = range.s.c; col <= range.e.c; col++) { const cellAddress = XLSX.utils.encode_cell({ r: 0, c: col }); const cell = worksheet[cellAddress]; firstRow.push(cell ? cell.v : ''); } // 用分号拼接第一行数据 this.firstRowString = firstRow.join(';'); this.$message.success('Excel文件解析成功'); } catch (error) { console.error('Excel解析错误:', error); this.$message.error('Excel文件解析失败，请检查文件格式'); this.firstRowString = ''; } finally { this.loading = false; } }; reader.onerror = () => { this.$message.error('文件读取失败'); this.loading = false; }; reader.readAsArrayBuffer(file); }, // 处理确认操作 handleConfirm() { if (!this.firstRowString) { this.$message.warning('未解析到有效数据'); return; } this.$message.success(`已获取首行数据: ${this.firstRowString}`); // 这里可以添加将数据发送到服务器的逻辑 // this.otaBatchUpgradeConfirm(this.firstRowString); // 关闭对话框 this.dialogVisible = false; }, // 清空文件 clearFile() { this.fileList = []; this.firstRowString = ''; }, handleExceed() { this.$message.warning('每次只能上传一个文件'); }, formatFileSize(size) { if (size < 1024) return size + ' B'; if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'; return (size / (1024 * 1024)).toFixed(1) + ' MB'; }, // 截断长字符串 truncateString(str, maxLength = 30) { if (str.length <= maxLength) return str; return str.substring(0, maxLength) + '...'; } } }; </script> <style scoped> .action-section { display: flex; flex-direction: column; gap: 20px; } .upload-section { position: relative; display: flex; justify-content: center; } .file-card { margin-top: 15px; padding: 15px; border-radius: 8px; background-color: #f5f7fa; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ebeef5; } .file-info { display: flex; align-items: center; gap: 12px; flex: 1; } .file-info i { font-size: 28px; color: #409EFF; } .file-details { line-height: 1.5; flex: 1; } .file-name { font-weight: 500; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-size { font-size: 12px; color: #909399; } .file-data { font-size: 12px; color: #67C23A; margin-top: 5px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-actions { margin-left: 10px; } .dialog-footer { display: flex; justify-content: flex-end; padding-top: 15px; border-top: 1px solid #ebeef5; } .has-file >>> .el-upload-dragger { border: 1px dashed #67C23A; background-color: rgba(103, 194, 58, 0.05); } .el-icon-loading { font-size: 20px; color: #409EFF; margin-right: 10px; } </style> 上传文件后布局混乱

07-12

- **现象**：上传/删除文件后布局塌陷、错位（如引用[2]描述）。 - **原因**：`el-upload` 的父容器未设置明确高度，动态内容变化导致容器高度异常。 - **修复**： ```css /* 为直接父容器设置固定高度或继承...

04-01

之前的解决方案涉及到将.wapper替换成.container，现在用户提供了新的CSS代码，其中确实使用了.container而不是.wapper，但问题依然存在。我需要分析用户提供的CSS代码，找出哪里导致.footer的宽度没有和body一致，...