Bootstrap 4标题下方空白无法消除求助：无内外边距仍存在空白

兄弟，我之前也碰到过这种明明检查了margin、padding还是存在的诡异空白！结合你的代码和描述，给你几个排查方向：

可能的原因及解决办法 #

• 行高（line-height）默认值作祟：标题标签（h1-h6这类）本身有默认的line-height，哪怕你没设置margin-bottom，过大的行高也会让标题下方看起来像有空白。试试给标题加个line-height: 1;或者line-height: normal;，看看空白会不会消失。
• 字体自带的内置间距：有些字体在设计时就给字符预留了上下留白，就算把margin、padding、line-height都设为0，还是会有缝隙。这种情况可以试试给标题的父容器设font-size: 0;，再单独给标题设置字体大小，或者用transform: translateY(-2px)这类微调来抵消。
• 折叠组件的默认样式影响：你用到了Bootstrap的collapse组件（$("#info").collapse("show")），注意看#info这个容器有没有默认的margin-top！有时候不是标题的问题，是下方折叠框的上边距“顶”出了空白，检查下这个元素的初始样式。
• 浮动元素触发的BFC问题：如果标题附近有浮动元素，可能会导致布局出现异常空白。给标题的父容器加上overflow: hidden;或者display: flow-root;，清除浮动带来的影响试试。
• 内联元素的基线对齐问题：如果标题是内联/内联块元素，它会和父容器的基线对齐，导致下方出现空白。给标题设置display: block;或者vertical-align: top;就能解决。

附上你提供的代码片段：

$('#explanation').click(function () { 
  // Make show/hide explanation text change on click 
  if ($("#explanation").text() == "Show Explanation ▼") { 
    $("#explanation").text("Hide Explanation ▲"); 
    $("#info").collapse("show"); 
  } 
  // 省略剩余逻辑
});

内容的提问来源于stack exchange，提问作者Benjamin Sommer