重大边际保证金问题

Question

我是一个后端开发人员，他在帮助使用Angular Web应用程序的人，在添加我们公司的字体时遇到了一个问题，他使用的是材料。

红色部分是mat-sidenav块，蓝色部分是mat-sidenav-content，黄色部分是我更改字体时突然变大的空白。

在devtools中，它看起来像这样：

因此在某处设置了element.style设置边距，但似乎无法在代码中找到它。现在奇怪的是，如果我将选项卡从chrome拖动到单独的窗口中，问题就解决了，但我认为用户不会喜欢这样做。有什么线索为什么会改变边距以及如何永久解决此问题？

/* VAriables */ 
:root {
  --color-accent:   black; /* Fallback */
}

.u-category-test     { --color-accent: rgba(67, 119, 64, 0.5); }
.u-category-qa       { --color-accent: rgba(153, 100, 19, 0.5); }
.u-category-prod     { --color-accent: rgba(216, 3, 3, 0.5); }

/* Nav */

  .nav-header {
    position: relative;
    padding: 2rem;
  }
  
  .nav-title {
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1;
    margin: 0;
  }
  
  .nav-title strong {
    font-weight: 600;
  }
  
  .nav-header-icon {
    position: absolute;
    width: 36px;
    height: 36px;
    top: 1.5rem; /* magic */
    right: 1.75rem; /* magic */
  }
  
  .nav-item {
    padding: .5em 0.5em 0.5em 0;
  }
  
  .nav-icon {
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin-right: .25rem;
  }
  
  .nav-category {
    margin: .2em 0;
    padding-left: 2rem;
    font-size: 11px;
    font-weight: normal;
    text-transform: uppercase;
  }
  
  .nav-button {
    display: block;
    width: 100%;
    padding: .2rem;
    padding-left: calc(2rem + 16px + .5rem); /* padding + icon + magic */
    line-height: 2;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: inherit;
    border: none;
    background-color: transparent;
    cursor: default;
    outline: none;
  }
  .nav-button:hover,
  .nav-button:focus:not(.is-selected) {
    background-color: hsla(0,0%,0%,.1);
  }
  .nav-button.is-selected {
    background-color: var(--color-accent);
  }

  .nav-button.is-selected,
  .nav-button.is-selected em {
    color: #fff;
  }
  .nav-button.is-selected:focus {
    opacity: .8;
  }
  
  .nav-button em {
    font-style: normal;
    font-weight: 600;
    pointer-events: none; /* makes it invisible to clicks */
  }

  .nav-footer {
    margin-top: 1rem;
    padding: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
  }

  .nav-footer-version {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: .75rem;
    line-height: 2;
    text-align: left;
    font: inherit;
    font-size: 13px;
    color: inherit;
    border: none;
    background-color: transparent;
    cursor: default;
    outline: none;
    text-align: center;
  }

  #button-download {
    background-color: rgba(196, 196, 196, 0.5);
  }
  #button-download:hover {
    background-color: rgba(150, 150, 150, 0.5);
  }
  .client-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
  }

  .main {
    height: 100%;
  }

<header class="nav-header">
  <h1 class="nav-title">Clients</h1>
</header>

<div class="nav-item">
  <h5 class="nav-category">
    <span class="nav-icon flag-icon flag-icon-be"></span>
    Client
  </h5>
  <button type="button" class="u-category-test nav-button" id="button-test" routerLink="test" routerLinkActive="is-selected">Dev</button>
  <button type="button" class="u-category-qa nav-button" id="button-qa" routerLink="qa" routerLinkActive="is-selected">QA</button>
  <button type="button" class="u-category-prod nav-button" id="button-prod" routerLink="prod" routerLinkActive="is-selected">Production</button>
</div>

.client-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
  }

  .main {
    height: 100%;
  }
   @font-face {
    font-family: 'Custom';
    src: url('/assets/fonts/Custom.ttf') format('truetype');
  }

  * {
    box-sizing: border-box;
  }

  html {
    height: 100%;
    font-family: 'Custom', 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden; /* Prevents rubber-band scrolling of the whole "page" */
    color: var(--color);
    background-color: #fff; /* To cover OSes with no default background color */
  }

  body {
    margin: 0;
    height: 100%;
    display: flex;
  }
  
  h1,
  h2,
  h3 {
    margin-top: 0;
    line-height: 1.5;
  }
  
  h1 {
    font-family: 'Custom';
    font-size: 48px;
    font-weight: normal;
  }
  
  h2 {
    font-family: 'Custom';
    font-weight: normal;
    letter-spacing: -1px;
    font-size: 16px;
  }
  
  h3, h4 {
    font-family: 'Custom';
    font-weight: normal;
    font-size: 16px;
    text-transform: uppercase;
  }
  
  h5{
    font-family: 'Custom';
    font-weight: normal;
    font-size: 30px;
  }

  table {
    width: 100%;
    border-spacing: 0;
    border: 1px solid hsla(0,0%,0%,.08);
    border-width: 0 1px 1px 0;
  }
  th {
    background-color: hsla(0,0%,50%,.06);
  }
  th,
  td {
    text-align: center;
    border: 1px solid hsla(0,0%,0%,.08);
    border-width: 1px 0 0 1px;
  }
  
  div.main{
    padding: 30px;
    button{
      font-family: 'Custom';
      margin: 10px;
    }
    button:hover{
      background-color: transparent;
      color:black;
    }
  }

<mat-sidenav-container class="client-container">
  <mat-sidenav mode="side" opened><app-side-nav></app-side-nav></mat-sidenav>
  <mat-sidenav-content>
    <div class="main mat-app-background">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

帮助我将position: unset应用于mat-sidenav-container的原因。默认情况下，此元素具有position: relative。

有趣的是，我只有多个sidenav才遇到这个问题。

<mat-sidenav-container>
  <mat-sidenav mode="side" position="start" opened>
    <desktop-main-navigation></desktop-main-navigation>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
  <mat-sidenav mode="over" position="end">
    Notifications
  </mat-sidenav>
</mat-sidenav-container>

您的特定问题以及添加字体时发生的事实可能已在此处进行了解释： https://stackoverflow.com/a/56219106/2804285