badge size: GOOGLE PLAY STORE and APPLE APP STORE margin: increase margin on APPLE badge to match size

Question

This question is linked to this one.

One of the comment suggests to add a margin around the APP STORE BADGE image to match the GOOGLE PLAY STORE BADGE that includes by default a margin.

After trying for a while to manipulate the GOOGLE PLAY STORE BADGE to crop the margin on it (like in example as this one). Which kind of work but it is not possible to crop the right margin of the image.

So adding a margin-top, margin-bottom, margin-right, margin-left in percentage of the size of the APP STORE BADGE seems more reliable.

My question is which values should we use in a CSS class:

.margin-apple-badge {
  margin: X %
}

Answer 1

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>

Answer 2

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 3

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.