为何相同HTML代码渲染显示效果存在10px偏移差异？

问题现象 #

开发者最初判断两个区块使用的HTML代码完全一致，因此对渲染效果的明显差异存在困惑，无法定位偏移原因：两个设计结构完全一致的section.screen-block区块，在页面渲染时存在排版差异——其中一个区块整体比另一个靠右约10像素，无法保持统一的栅格对齐效果。

复现代码 #

<!-- 出现排版偏移的区块 -->
<section class="screen-block">
    <div>
        <div class="d-flex justify-content-start">
            <a class="anchor" id="restriction"></a>
            <h4 style="display:inline;padding-right:8px">Restriction</h4>
        </div>
    </div>
    <!-- 此处类名存在书写错误 -->
    <div class="=row">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card border-success"></div>
        </div>
    </div>
</section>

<!-- 排版正常的区块 -->
<section class="screen-block">
    <div>
        <div class="d-flex justify-content-start">
            <a class="anchor" id="limits"></a>
            <h4 style="display:inline;padding-right:8px">Limits</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card border-success"></div>
        </div>
    </div>
</section>

核心问题原因 #

偏移的根源是栅格容器的类名书写错误：

• 错误写法将Bootstrap栅格系统的标准.row类误写为=row，该类名无法匹配任何预定义样式规则
• 正常.row类的默认样式为margin: 0 -15px，作用是抵消内部.col-*列元素自带的左右15px内边距，实现栅格布局的全宽对齐
• 当类名书写错误时，容器不会应用这组负边距，导致内部带左右内边距的列元素，相对排版正常的区块向外偏移约15px，也就是视觉上感知到的10像素级别的靠右效果

修复方案 #

将错误的class="=row"修正为标准栅格类class="row"，即可让两个区块的排版完全对齐。

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