All geek questions in one place

Icon Size: GOOGLE PLAY STORE and APPLE APP STORE margin: increase the margin by the APPLE icon to fit the size

This question is related to this .

One comment suggests adding margins around the APP STORE BADGE image to match GOOGLE PLAY STORE BADGE, which includes the default margin.

After trying to manipulate GOOGLE PLAY STORE BADGE for a while to trim it ( as in an example like this ). What a job, but it's impossible to crop the right edge of the image.

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

My question is: what values ​​should be used in the CSS class:

 .margin-apple-badge { margin: X % }
+6
source share
3 answers

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

The CSS rule on img should be:

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

Then, in both <div> surrounding <img> each icon, if the width values ​​are the same (300px in the example below), the APPLE APP STORE and GOOGLE PLAY STORE icons will have the same 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>
+5
source

I would suggest using padding: 6% on the Apple icon, with the size box-sizing: border-box : of course, box-sizing: border-box , then you can set the same height on both icons

0
source

I decided to download the Google Play icon, manually crop it in Photoshop and load it from my side, because otherwise you will get REAL extra spaces outside the button, and this will affect the alignment of neighboring blocks.

-1
source

Source: https://habr.com/ru/post/1241201/

More articles:


All Articles