There is the following structure

.container { display: inline-block; border: 1px #888 solid; background-color: forestgreen; font-size: 60px; } .content { display: inline-block; overflow: hidden; background-color: #EFA; line-height: 2em; } 
 <span class="container"> <span class="content"> Text </span> </span>

I do not understand why empty space appears inside the container below, i.e. the height of the outdoor unit is greater than necessary. If for the internal block do not specify overflow: hidden; then the height of the outdoor unit becomes smaller, and the empty horizontal space disappears.

Is it possible to overflow: hidden; To ensure that there is no empty space?

    2 answers 2

    Inline content removed and empty space no longer appears.

     .container { display: inline-block; border: 1px #888 solid; background-color: forestgreen; font-size: 60px; } .content { display: block; //Здесь убрали inline overflow: hidden; background-color: #EFA; line-height: 2em; } 
     <span class="container"> <span class="content"> Text </span> </span> 

       .container { display: inline-block; border: 1px #888 solid; background-color: forestgreen; font-size: 60px; } .content { display: inline-block; overflow: hidden; background-color: #EFA; line-height: 2em; vertical-align: top; /* !!!!!!!! */ } 
       <span class="container"> <span class="content"> Text </span> </span>

      • Thank you, it works, but further exploration revealed one strange feature. See below. - Yuchimenko Igor