navbar品牌logo和文字间空白源于图片默认vertical-align: baseline与文字基线对齐错位；应统一设vertical-align: top或用display: flex+align-items: center，并确保.navbar-brand img和.navbar-brand > *均重置对齐方式。
Navbar品牌Logo和文字之间有奇怪的空白，怎么调？
Bootstrap默认会给.navbar-brand内部的<img>加vertical-align: middle，同时<img>本身自带浏览器默认的display: inline基线对齐行为——这就导致Logo和旁边的文本之间总有一段“看不见但存在”的缝隙，尤其在小字号或紧凑布局里特别明显。
- 最直接的办法是给Logo图片加
align-items: center配合display: flex（但需注意父容器是否允许Flex） - 更稳妥的做法是统一设为
vertical-align: top或vertical-align: -2px（微调常用值） - 如果用了
<picture></picture>或<svg></svg>，记得也加上vertical-align，否则SVG默认对齐方式可能更糟
用CSS覆盖Bootstrap默认间距，哪些选择器要盯住？
别只改.navbar-brand外边距——真正起作用的是它内部元素的排列逻辑。关键选择器就三个：
-
.navbar-brand img：必须重置vertical-align，建议写成vertical-align: top -
.navbar-brand > *：防止新增子元素（比如<span></span>包裹的文字）继承奇怪对齐 -
.navbar-brand自身：若需整体左右留白，用padding-left/padding-right，别碰margin（容易和Bootstrap的.navbar-nav冲突）
示例：
.navbar-brand img {
vertical-align: top;
}
.navbar-brand > * {
vertical-align: top;
}
用Bootstrap 5的Spacing工具类能快速解决吗？
不能直接靠ms-2、me-3这类工具类调Logo和文字之间的“内间距”——因为它们作用于兄弟元素，而Logo和品牌文字通常在同一个<a></a>标签里，属于父子关系，不是并列元素。
- 如果把Logo和文字拆成两个独立
<span></span>，再用me-2加间隙，可行但破坏语义结构 - 更推荐用
gap：给.navbar-brand设display: flex+gap: 0.5rem，然后把Logo和文字分别包进<span></span> - 注意
gap在IE中不支持，如需兼容就得回退到margin-right手动控制
为什么加了!important还是没生效？
常见原因是CSS权重不够，或者样式被Bootstrap的@media断点规则覆盖。比如你在min-width: 992px下设置了vertical-align，但实际页面宽度小于992px，那规则根本不会触发。
- 检查开发者工具里真实生效的样式，看是不是被
@media (min-width: 992px)包裹住了 - 避免盲目加
!important，优先提高选择器 specificity，例如用.navbar .navbar-brand img代替.navbar-brand img - 如果用Sass，确保自定义样式在Bootstrap源码之后引入，否则变量和默认样式会覆盖你的修改
真正难调的从来不是像素值，而是搞清那个空隙到底是line-height撑开的、baseline对齐残留的，还是flex gap没生效——得先定位根源，再动刀。
