Question

此问题与this one相关联。

其中一条评论建议在APP STORE BADGE图像周围添加一个边距，以匹配默认包含保证金的GOOGLE PLAY STORE BADGE。

尝试了一段时间来操纵GOOGLE PLAY STORE BADGE来裁剪其上的边距（like in example as this one）。哪种工作但不能裁剪图像的右边距。

因此，以APP STORE BADGE大小的百分比添加margin-top，margin-bottom，margin-right，margin-left似乎更可靠。

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

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

Answer 1

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

在img上的CSS规则中必须是：

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

然后在每个徽章的<div>周围的<img>中，如果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>

Answer 2

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

Answer 3

我选择下载Google Play图标，在Photoshop中手动对其进行裁剪并从我的侧面加载，因为否则，在按钮外您会得到REAL额外的间隙，这会影响相邻块的对齐。

徽章大小：GOOGLE PLAY STORE和APPLE APP STORE保证金：增加APPLE徽章的保证金以匹配大小

3 个答案: