如何让页面内Account Overview表格与其他表格组件对齐

需要实现页面中带外框的Account Overview区域的对齐效果：使其左侧与下方的Welcome表格对齐，上下边缘与右侧的Notifications表格对齐，即需将该区域向左、向上调整位置。预期对齐效果示意图：

相关页面代码 #

HTML代码 #

<div class="sdps-is-relative badge-example-outline sdps-p-around_medium sdps-m-around_medium">
   <sdps-badge
     sdps-id="spdb-promotional-beta-overlay"
      type="promotional"
      status-text="Beta"
      promotional-type="beta"
      sr-label-prefix="You have got"
      sr-label-suffix="notifications"
      is-overlay
   >
 </sdps-badge>
<div class="ao-text-header">Account Overview has a new look</div>
  You can view your retirement accounts below, or go back to the classic experience.
</div>
<sdps-panel sdps-id="account-overview-panel-personalperformance">
 <div class="SSOManageAccount modalInject">
  <div slot="modal-body" appModalContent>
     <div>We want to let you know you’ll be accessing schwabdeferredcompensation.com, a third-party website. By clicking continue below, you are requesting to open a new page. 
 </div>
</div>
<div slot="modal-footer" appModalFooter>
    <div class="rps__d-flex rps__align-items-center SSOManageAccountFooter">
        <div class="rps__flex-grow-1 rps__align-self-end">(0823-3U5E)</div>
        <sdps-button class="sdps-m-left_medium no-margin" variation="secondary"
            sdps-id="btn-manage-external-account" 
    (sdpsClick)="modalContent.actions.secondary.action()"
            [sdpsAriaLabel]="modalContent.actions.secondary.ariaLabel"> 
   {{modalContent.actions.secondary.label}}</sdps-button>
        <sdps-button class="sdps-m-left_medium no-margin" variation="primary"
            sdps-id="btn-manage-external-account" 
     (sdpsClick)="modalContent.actions.primary.action()"
            [sdpsAriaLabel]="modalContent.actions.primary.ariaLabel"> 
    {{modalContent.actions.primary.label}}</sdps-button>
    </div>
  </div>
 </div>
<div #loadable>
 <app-welcome></app-welcome>
 <div class="sdps-row">
    <app-balance></app-balance>
</div>
<sdps-button class="sdps-m-left_medium no-margin top-margin" variation="secondary" sdps-id="btn-manage-external-account"
    (sdpsClick)="openModal()"
    [sdpsAriaLabel]="modalContent.actions.primary.ariaLabel">{{displayText}}</sdps-button>
  </div>
</sdps-panel>

CSS代码 #

@import "lib/scss/variables.scss";

.rps__balance-graph {
  &.loading {
     min-height: 274px;
 }
}
.no-margin {
 margin-left: 0!important;
 }

.top-margin {
 margin-top: 20px!important;
 }

.SSOManageAccountFooter {
& sdps-button:not(:last-child) {
   margin-right: 20px;
 }

 & *:nth-child(1) {
   order: 1;
 }

& *:nth-child(2) {
 order: 2;
 }

& *:nth-child(3) {
   order: 3;
  }
 }

@media (max-width: $tablet-portrait-min) {
 .SSOManageAccountFooter {
  flex-wrap: wrap;

  & > *:not(:last-child) {
    margin-top: 24px;
 }

& *:nth-child(1) {
    order: 3;
}

& *:nth-child(2) {
    order: 2;
}

& *:nth-child(3) {
    order: 1;
}

& sdps-button {
    width: 100%;
    justify-content: center;

    &::ng-deep > button {
        width: 100%;
        justify-content: center;
    }

    &:not(:last-child) {
        margin-right: 0;
       }
     }
   }
  }

.badge-example-outline {
  border-radius: 2px;
  border: 1px solid #cbd1d6;
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  position: relative;
 }

.ao-text-header {
 font-size: 18px;
  font-size: 1.5rem;
 font-family: CharlesModern-Medium,CharlesModern-Regular,Arial,Helvetica,sans-serif;
 font-weight: 400;   
}

解决方案 #

问题分析 #

当前带外框的Account Overview区域（.badge-example-outline）应用了sdps-m-around_medium类，该类会给元素添加四周的外边距，这是导致它和下方Welcome表格左侧不对齐、与右侧Notifications表格上下边缘不一致的核心原因。

具体修改 #

方法1：修改HTML移除多余类

直接删除该区域的sdps-m-around_medium类，保留内边距类维持内部内容排版：

<div class="sdps-is-relative badge-example-outline sdps-p-around_medium">
   <!-- 内部内容不变 -->
</div>

方法2：通过CSS覆盖样式

如果无法修改HTML，可添加CSS规则覆盖默认的外边距：

.badge-example-outline {
  /* 移除四周外边距，或根据实际布局调整为匹配的值 */
  margin: 0 !important;
  /* 若需要微调内边距，可修改此处数值以匹配下方表格的内边距 */
  padding: var(--sdps-spacing-medium);
}

对齐细节调整 #

• 若下方Welcome表格存在左侧间距，需确保.badge-example-outline的左侧padding或margin与之一致；
• 对比右侧Notifications表格的上下位置，微调.badge-example-outline的margin-top值，实现上下边缘对齐。

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