Django搭建作品集网站时div文本出现非预期多余间距问题

安全阿岳

2026-8-30

问题根因

第一处问题来自inline-block的默认特性：你给项目卡片、经历卡片都设置了inline-block属性，这类行内块元素和普通文本一样参与行排版，而HTML中标签之间的换行、缩进空格会被浏览器解析成一个半角空格文本节点，默认状态下这个看不见的空格会占据3-4px宽度，就是你看到的莫名多余间距。
第二处问题是浮动元素未清除导致的文本绕排：左侧的人物图容器加了float: left，但父容器.project-div没有做清除浮动处理，视口宽度足够时，后面的行内块卡片会自动环绕浮动图片排版，自然就出现了左侧异常缩进；当窗口缩小到剩余宽度放不下卡片时，卡片会被挤到图片下方，看起来就对齐了，和你描述的现象完全吻合。
第三处是HTML标签书写错误：Education标题的开标签是<h1>，闭标签误写成了</h2>，标签不匹配会触发浏览器的容错解析，不同浏览器补全标签的逻辑不一致，很容易产生不可预期的位置偏移。
额外的无效代码：你给.experience-div设置了margin: auto但没给这个容器指定宽度，块级元素宽度默认撑满父容器的情况下，margin: auto不会产生任何居中效果。

修复步骤

先修正HTML标签错误，把Education标题的闭合标签改成匹配的</h1>：

<h1 class="brdr block div-title roboto fnt-orange roboto">
    Education
</h1>

给浮动元素的父容器加清除浮动规则，避免后续内容绕排：

.project-div::after {
    content: "";
    display: block;
    clear: both;
}

消除行内块元素之间的空白间距，推荐用不改动HTML结构的方案：给行内块元素的父容器设置font-size: 0，让看不见的空格文本节点宽度为0，再在子元素上把字体大小重置为需要的数值即可：

/* 父容器消空格 */
.project-div, .experience-div {
    font-size: 0;
}
/* 子元素恢复正常字体大小，避免文字被隐藏 */
.project-container, .experience-container {
    font-size: 16px; /* 正文大小按你的设计需求调整 */
}
.div-title {
    font-size: 40px; /* 保留你原本的标题字号设置 */
}

如果不想改CSS，也可以直接把HTML里相邻行内块标签之间的换行、空格全部删掉，让标签连在一起写，但这种写法代码可读性很差，不推荐使用。
4. 如果需要让经历区块整体居中，给.experience-div设置和内容匹配的固定宽度（比如和你卡片总宽度一致），margin: auto才能正常生效。

原理说明

浏览器解析HTML文本时，会把标签之间连续的换行、空格、制表符合并成一个半角空格，行内/行内块元素会和普通文本一样按顺序排列，所以这个看不见的空格会占据宽度形成间隙；把父容器字体大小设为0后，这个空格的宽度也会变成0，间隙自然消失，再单独给子元素设字体大小不会影响正常文字显示。
浮动元素会脱离常规文档流，但依然会占据文本流空间，行内内容会自动避开浮动元素位置排列，这是CSS浮动设计的原生绕排特性；给父容器加伪元素清除浮动后，父容器能正确计算浮动子元素的高度，后续块级内容就会正常排在浮动区域下方，不会出现绕排缩进。
HTML标签必须正确闭合、嵌套匹配，否则浏览器会启动容错机制自动修正DOM结构，不同浏览器的修正逻辑存在差异，很容易出现样式错乱、位置偏移等不可预期的问题。

内容的提问来源于stack exchange，提问作者Afif Mohammed Varikkodan