CSS - Div中未定义的间距

Question

我有以下代码

＆＃13;

＆＃13;

    html {
      height: 100%;
      overflow: hidden;
    }

    body {
      height: 100%;
      color: #bdc3c7;
      font-family: Montserrat;
      background-color: #3E4651;
    }

    .nav {
      display: block;
      width: 100%;
    }

    .navBtn {
      font-size: 22px;
      display: inline-block;
      text-align: center;
      width: 24.8%;
      color: #bdc3c7;
    }

    .navBtn:hover {
      cursor: pointer;
    }

    .infoCenter {
      height: 40%;
      width: 30%;
      background-color: black;
    }

    .totalsContainer {
      margin-top: 0px;
      display: inline-block;
      border: 1px solid white;
      height: 100%;
    }

    .listingsContainer {
      display: inline-block;
      border: 1px solid white;
      height: 100%;
    }

    .infoLabel {
      font-size: 14px;
    }

    .infoValue {
      font-size: 10px;
      text-align: center;
    }



    .selected {
      border-bottom: 2px solid #bdc3c7;
    }

    .contents {
      display: block;
      margin-top: 10px;
      width: 100%;
      height: 525px;
      background-color: #25373D;
    }

＆＃13;

 <div class="infoCenter">
        <div class="totalsContainer">
          <h1 class="infoLabel totalPendingLbl">Total Pending</h1>
          <h2 id="#totalPending" class="infoValue" 
    totalPending">$100.00</h2>
          <h1 class="infoLabel totalAvailableLbl">Total Available</h1>
          <h2 id="#totalAvailable" class="infoValue 
    totalAvailable">$500.00</h2>
        </div>
          <div class="listingsContainer">
          <h1 class="infoLabel totalListingsLbl">Total Listings</h1>
          <h2 id="#totalListings" class="infoValue totalListings">10</h2>
          <h1 class="infoLabel listingsSiteLbl">Listings By Site</h1>
          <h2 id="#listingsonGoat" class="infoValue listingsonGoat">6</h2>
          <h2 id="#listingsonStockx" class="infoValue listingsonStockx">4</h2>
        </div>
</div>

＆＃13;

＆＃13;

＆＃13;

并且如图所示，每当我在css中没有规则时，主容器中的第一个容器向下移动大约10个像素。我不知道是什么让这个问题发生，但它已经发生在我的许多项目中并且非常令人沮丧。这适用于我的应用程序，因此它不适合常规浏览器，但问题仍然存在。谢谢大家。

Answer 1

inline-block默认情况下沿着它们的基线对齐，如果它们包含文本，则是那里的最后一行文本。为避免这种情况，您可以使用其他vertical-align设置，例如top或bottom。我在下面使用了top（适用于.totalsContainer和.listingsContainer）

＆＃13;

＆＃13;

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  color: #bdc3c7;
  font-family: Montserrat;
  background-color: #3E4651;
}

.nav {
  display: block;
  width: 100%;
}

.navBtn {
  font-size: 22px;
  display: inline-block;
  text-align: center;
  width: 24.8%;
  color: #bdc3c7;
}

.navBtn:hover {
  cursor: pointer;
}

.infoCenter {
  height: 40%;
  width: 32%;
  background-color: black;
}

.totalsContainer {
  margin-top: 0px;
  display: inline-block;
  vertical-align: top;
  border: 1px solid white;
  height: 100%;
}

.listingsContainer {
  display: inline-block;
  vertical-align: top;
  border: 1px solid white;
  height: 100%;
}

.infoLabel {
  font-size: 14px;
}

.infoValue {
  font-size: 10px;
  text-align: center;
}

.selected {
  border-bottom: 2px solid #bdc3c7;
}

.contents {
  display: block;
  margin-top: 10px;
  width: 100%;
  height: 525px;
  background-color: #25373D;
}

＆＃13;

<div class="infoCenter">
  <div class="totalsContainer">
    <h1 class="infoLabel totalPendingLbl">Total Pending</h1>
    <h2 id="#totalPending" class="infoValue" totalPending ">$100.00</h2>
          <h1 class="infoLabel totalAvailableLbl ">Total Available</h1>
          <h2 id="#totalAvailable " class="infoValue totalAvailable ">$500.00</h2>
        </div>
          <div class="listingsContainer ">
          <h1 class="infoLabel totalListingsLbl ">Total Listings</h1>
          <h2 id="#totalListings " class="infoValue totalListings ">10</h2>
          <h1 class="infoLabel listingsSiteLbl ">Listings By Site</h1>
          <h2 id="#listingsonGoat " class="infoValue listingsonGoat ">6</h2>
          <h2 id="#listingsonStockx " class="infoValue listingsonStockx ">4</h2>
        </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您也可以对齐方框设置

.infoCenter {
  display: flex; 
}

如果你使用flexbox很好。

它允许您完全删除内部容器的display: inline-block; height: 100%; vertical-align:top;，因为flexbox默认对齐值是“stretch” - 所有元素将获得相等的高度。

Answer 3

你正试图让它们并排。您可以通过向您的totalsContainer添加float left来解决这个问题：

.totalsContainer {
    margin-top: 0px;
    display: inline-block;
    border: 1px solid white;
    height: 100%;
    float:left;
}