.blockType {
display: block;
background-color: yellow;
}
.inlineType {
display: inline;
background-color: skyblue;
font-size: 40px;
}
.inlineBlockType {
display: inline-block;
background-color: orange;
height: 100px;
width: 100px;
}<body>
<div class="blockType">
block1
</div>
<div class="inlineType">
inline1
</div>
<div class="inlineBlockType">
inline-block1
</div>
<div class="inlineType">
inline2
</div>
<div class="blockType">
block2
</div>
</body>CodePen: https://codepen.io/1sharth/pen/qBdaKGe?editors=1100
I noticed that whenever I change the font-size of the inline1 element, these gaps change. I don't know why it's happening.
