Bootstrap 5下H5与em标签间距无法消除问题求助

问题出在哪 #

Bootstrap 5自带的样式里，<h5>默认有margin-bottom: 0.5rem，哪怕你手动写了margin:0，说不定因为选择器权重不够被覆盖了；另外<em>是行内元素，和块级的h5放在一起时，基线对齐的规则也可能产生视觉上的间距——不是真的margin，但看起来像有间距。

直接能用的修复方法 #

方法1：写精准的CSS覆盖 #

给你的.mediaCard容器下的元素单独设置样式，确保权重压过Bootstrap：

.mediaCard h5 {
  margin: 0 !important; /* 强制干掉Bootstrap的默认margin */
  line-height: 1; /* 把行高拉到最小，消除额外空白 */
}

.mediaCard em {
  display: block; /* 把em转成块级元素，避免行内元素的基线间距 */
  margin-top: 0;
  line-height: 1;
}

方法2：用Bootstrap自带的工具类（最快） #

不用写额外CSS，直接在HTML里加Bootstrap的内置类：

<div class="mediaCard">
  <img src="images/architectgirl-1.jpg" class="img-fluid">
  <h5 class="m-0 lh-1">What value does a good Architect bring in my project? </h5>
  <em class="d-block mt-0 lh-1">15 min read</em>
</div>

• m-0：清除所有margin
• lh-1：把行高设为1，去掉多余的垂直空间
• d-block：把em改成块级元素，解决行内元素的基线问题

方法3：全局改Bootstrap的标题样式（适合全项目统一调整） #

如果你整个项目都不想让h5有默认底部间距，可以用Sass编译Bootstrap时改变量：

$headings-margin-bottom: 0;
@import "../node_modules/bootstrap/scss/bootstrap";

这种方法不用挨个元素改，一次性全局生效，但要确保你是用Sass引入的Bootstrap。

怎么确认生效 #

按F12打开浏览器开发者工具，选中h5和em元素，看右侧的样式面板，确认margin、padding、line-height都是你设置的值，Bootstrap的默认样式已经被划掉了就行。

内容的提问来源于stack exchange，提问作者Rajesh Vaishnav