增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小

Posted 2023-02-25

【中文标题】增加 App Store 徽章的边距以匹配 Google Play 商店徽章的大小

【英文标题】：Increase margin on App Store badge to match size of Google Play Store badge

【发布时间】：2017-12-01 09:43:37

【问题描述】：

这个问题与这个问题有关： New Google Play badge doesn't get the size right

其中一条评论建议在 App Store 徽章图像周围添加边距，以匹配默认情况下包含边距的 Google Play 商店徽章。

在尝试操纵 Google Play 商店徽章以裁剪其边距一段时间后（例如：Crop image in CSS）。哪种工作，但无法裁剪图像的右边距。

因此，以 App Store 徽章大小的百分比添加margin-top、margin-bottom、margin-right、margin-left 似乎更可靠。

我的问题是我们应该在 CSS 类中使用哪些值：

.margin-apple-badge 
  margin: X %

【参考方案1】：

应用到 APPLE APP STORE 徽章的正确值是 style="margin:6%;width:88%"。

img 上的 CSS 规则必须是：

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

那么在每个徽章的<img>周围的两个<div>中，如果width的值相同（在下面的示例中为300px），则徽章APPLE APP STORE和GOOGLE PLAY STORE将具有相同的大小纵横比.

<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>

【参考方案2】：

我建议在 Apple 徽章上使用 padding: 6%，当然还有 box-sizing: border-box，然后您可以在两个徽章上设置相同的高度

【参考方案3】：

我选择下载 Google Play 图标，在 Photoshop 中手动裁剪它并从我这边加载，否则你会在按钮外得到真正的额外间隙，并且会影响相邻块的对齐。

【讨论】：

这是不允许的。