Increase margin on App Store badge to match size of Google Play Store badge

Question

This question is linked to this one: New Google Play badge doesn't get the size right

One of the comment suggests to add a margin around the App Store badge imag

Answer 1

i'd would suggest to use padding: 6% on the Apple badge, with box-sizing: border-box of course, then you can set equal height on both badges

Answer 2

I choose to download Google Play icon, manually crop it in Photoshop and load from my side, because otherwise you will get REAL additional gaps outside button and it will affect alignment of neighboring blocks.

Answer 3

The right value to apply to the APPLE APP STORE badge is style="margin:6%;width:88%".

In CSS rule on img must be:

img {
    max-width: 100%;
    height: auto;
}

Then in both <div> surrounding the <img> of each badge, if the widthvalues are the same (300px in example below), the badges APPLE APP STORE and GOOGLE PLAY STORE will have the same size aspect ratio.

<div class="">
  <div class="" style="width:300px">
    <img  src="/Download_on_the_App_Store_Badge_FR_135x40.svg"  style="margin:6%;width:88%"></img>
  </div>
  <div class="" style="width:300px">
    <img  src="/google-play-badge.png" >/img>
  </div>
</div>