Annoying whitespace for inline-block element [duplicate] - css

Question

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Inline block adding bottom space
(3 answers)
Closed 4 years ago.
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>