Annoying whitespace for inline-block element

Question

So, there seems to be some whitespace added to an element on my page when I set the display to be inline-block. Is there a way to get rid of this white space without changing the line-height to 0px or changing the display type to block and manually setting a width? I may want the red element below to expand dynamically based upon the content in the future.

This is what I want (no green below the red):

This is what I am getting (green below the red):

Here's a JSFiddle of the issue: https://jsfiddle.net/rstL6omk/5/

Answer 1

The additional space is from the box model for laying out the "inline" elements including all inline-block or inline element. It seems like voodoo because you don't see it in the box-model for the elements involved. If you set font-size: 0; on .nav_container it goes away.

Answer 2

The problem is that you have overflow: hidden on your .logo_container. Removing this will get rid of the 4 pixels at the bottom of the element.

Then you simply need to make use of height: auto (the default for height) on .brand_logo_icon in order for it to expand based on its content.

This can be seen in the following:

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>