使用 Bootstrap 5 时无法完全移除内部的垂直填充<div>



我正在尝试使用Bootstrap 5删除块内文本的所有填充(顶部+底部)。

当在没有Bootstrap的情况下使用html时,设置padding: 0px正是我所期望的:

<div style="padding: 0px; background-color: gray;">no bootstrap</div>//工作!

然而,当我使用Bootstrap时,填充永远不会为0,即使在设置了类my-0之后也是如此。不管怎样,似乎总是会添加额外的填充。

<div class="my-0 bg-info">using bootstrap my-0</div>//不工作

当包含Bootstrap css时,使用样式覆盖0的填充也不起作用。

<div class="my-0 bg-info" style="padding: 0px !important;">using bootstrap my-0</div>//不工作

这里有解决方案吗?

添加class="p-0"。将填充设置为0的引导程序类。对于顶部和底部,使用"py-0",对于左侧和右侧,使用"py-0">

我发现有一个样式属性line-height应该用来实现这一点!将其设置为1或1.25完全符合我的要求。bootstrap的默认值是1.5,因此会有额外的非故意填充。

<div class="p-0 m-0 bg-info">Will remove all Paddings and margins (no extra space inside and outside div)</div>
<div class="p-0 bg-info">Will remove all Paddings (no extra space inside div)</div>

相关内容

  • 没有找到相关文章

最新更新