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 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 this: Crop image in CSS). 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>