enter image description here

.promo__display { display: inline-block; margin: 0px; } .promo__doit { padding-left: 26px; margin-bottom: 32px; margin: 0px; } 
 <div class="promo__doit promo__display"> <h1 class="promo__h1">DO IT NOW</h1> <h4 class="promo__h4">Or You Never Get It Back</h4> </div>

The height of the block is highlighted in blue. From all the manipulations I found out that if I remove display: inline-block; then the height of the block will be in content, but did not understand why the display affects the height so much, did not notice it before, what is the reason?

    1 answer 1

    Perhaps the vertical margin of the elements h1 and h4, which are the default in the browser? And yet, this makes no sense:

     margin-bottom: 32px; margin: 0px;

    You set the bottom margin at the beginning, and then you drop it with the shorthand property.

    • These are all the results of what I tried to make out, just the trash remained. H1 and H4 seem to have nothing to do with it, I looked at how much space they took, everything is fine there - Alexander Alekseev
    • Well, it may still be that when the value of the inline-block vertical margin does not collapse and do not fall out of the parent container, and when the block falls out, this is the default behavior of the block boxes in browsers. So consider this too. - Stevo Moskóvich