内联块元素的烦人空白

Question

因此，当我将显示设置为inline-block时，页面上的元素似乎添加了一些空格。有没有一种方法可以摆脱空白，而无需将行高更改为0px或将显示类型更改为block并手动设置宽度？我可能希望下面的红色元素将来会根据内容动态扩展。

这就是我想要的（红色下面没有绿色）：

这就是我得到的（红色下面的绿色）：

这是问题的一个JSFiddle：https://jsfiddle.net/rstL6omk/5/

Answer 1

额外的空间来自盒子模型，用于布置“ inline”元素，包括所有inline-block或inline元素。似乎是巫毒教，因为您没有在涉及元素的盒子模型中看到它。如果您在font-size: 0;上设置了.nav_container，它将消失。

Answer 2

问题是您的overflow: hidden上有.logo_container。删除该元素将消除元素底部的4个像素。

然后，您只需要在height: auto上使用height（.brand_logo_icon的默认设置），即可根据其内容进行扩展。

这可以在下面看到：

body {
  background: rgb(40, 40, 40);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
  user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  margin: 0;
  cursor: default;
  color: rgb(60, 60, 60);
}

div {
  box-sizing: border-box;
}

@supports(padding: max(0px)) {
  .container {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  #nav .nav_container {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

#nav {
  padding: 0px;
  display: block;
  background: rgb(55, 155, 55);
}

.brand_logo_icon {
  display: block;
  background-color: rgb(200, 30, 30);
  width: 60px;
}

#nav .logo_link {
  position: relative;
  display: block;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 45px;
}

#nav .nav_container {
  display: block;
  max-width: 1300px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#nav .nav_container .logo_container {
  display: inline-block;
  padding: 0px;
  background: rgb(80, 80, 80);
  border-radius: 0px 0px 5px 5px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
}

#nav .nav_container .brand_logo_icon {
  width: 70px;
}

.container {
  display: block;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  transition: margin 225ms linear;
}

.container .splash:before {
  content: "";
  display: block;
  padding-top: 56.2%;
}

.container .splash {
  position: relative;
  display: block;
  width: 90vw;
  max-width: 1300px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  text-align: center;
}

.container .splash .splashimg {
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0;
}

.container .content {
  display: block;
  position: relative;
  left: 0;
  richness: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1300px;
  opacity: 1;
  animation: introAnimation 400ms ease-in-out 0ms forwards;
  vertical-align: top;
  white-space: 0;
  font-size: 0px;
}

.container .content.c {
  text-align: center;
}

.container .content .home_img:before {
  content: '';
  display: block;
  padding-top: 56%;
}

.container .content .home_img {
  display: block;
  background-color: rgb(30, 30, 90);
}

.container .content .item_block {
  display: inline-block;
  width: 50%;
  padding: 10px;
  vertical-align: top;
  box-sizing: border-box;
  text-align: center;
}

.container .content .item_block .poster:before {
  content: '';
  display: block;
  padding-top: 151%;
}

.container .content .item_block .poster.sqr:before {
  padding-top: 100%;
}

.container .content .item_block .poster {
  display: block;
  max-width: 550px;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url('/assets/no_poster.png');
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

<div id="nav">
  <div class="nav_container">
    <div class="logo_container">
      <div class="brand_logo_icon">ABC ABC ABC ABC ABC ABC ABC ABC</div>
    </div>
  </div>
</div>
<div id="container" class="container">
  <div class="content">
    <div class="home_img"></div>
  </div>
</div>