Solution 1 :

You have to change iframe height to 100% which it will take its parent component’s (a tag) height. And then giving height to the a tag will be enough to solve your issue 🙂

Solution 2 :

Keep the the iframe at width: 100%; height: 100%; and set the size of its wrapper. I dont see your styling but you can also could have trouble with different display properties in your code

.inline-block {
  border: 1px solid;
  display: flex;
}

a {
  border: 1px solid red;
  width: 88px;
  height: 28px;
  margin: 0 20px;
}

iframe {
  background: red;
  height: 100%;
  width: 100%;
}
<div class="inline-block w-100">

            <a><iframe src="https://www.facebook.com/plugins/share_button.php?href=...=button_count&size=large&appId=XXXXXXX" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe></a>
  
            <a class="btn btn-success" href="..." style="height: 28"><i class="fa fa-whatsapp my-float"style="max-height: 28">enquiries</i></a>


</div>

Problem :

I have an <iframe> and an <a> in a <div> with inline-block class, however it turned out they are different heights even when I set the same height for both of the elements. Did I miss something?

html:

<div class="inline-block w-100">

    <a><iframe src="https://www.facebook.com/plugins/share_button.php?href=...=button_count&size=large&appId=XXXXXXX&width=88&height=28"
               width="88" height="28" style="border:none;overflow:hidden"
               scrolling="no" frameborder="0" allowTransparency="true"
               allow="encrypted-media"></iframe></a>
    <a class="btn btn-success" href="..."
       style="height: 28"><i class="fa fa-whatsapp my-float"
                             style="max-height: 28">enquiries</i></a>

</div>

Comments

Comment posted by Yalcin Kilic

can you post your css?

By