Bootstrap 排版周围不需要的额外空间答案

【问题标题】：Unwanted extra space around Bootstrap typographyBootstrap 排版周围不需要的额外空间
【发布时间】：2020-04-16 04:16:12
【问题描述】：

在 Bootstrap 4 中，即使在将 margin 或 padding 应用到 0 或在 line-height 周围玩耍之后，文本的顶部和底部也会有多余的空间。额外的空间仍然存在。它使元素与文本的对齐变得越来越困难。

见下面示例中的红线，摘自 Bootstrap 官方文档：

【问题讨论】：

【解决方案1】：

您很可能需要在 css 规则的末尾使用 !important 标志。

例如：

h1 { padding: 0 !important; }

这不是最漂亮也可能不是最有效的方法，但它通常绕过引导 css 规则。

【讨论】：

【解决方案2】：

多余的空格与h1 标题无关。它通过 css 选择器 .bd-content>table>tbody>tr>td 应用。

你可以试试：

.bd-content>table>tbody>tr>td {
padding: 0;
}

【讨论】：

【解决方案3】：

使用较小的行高，例如

h1, h2, h3, h4, h5, h6{
 line-height:0.6;
}

这应该根据您的要求工作，否则将数字更改为 0.6... 左右

【讨论】：