HTML アプリバッジの位置調整の仕方

拙い質問ですが回答いただけると幸いです。

現在模写コーディングを行っています。
（※モデルサイトはこちらです➡https://flowr.is/）

今はapple storeとgoogle playのバッジを貼り付ける段階にいるのですが、うまく2つのバッジの位置を調整できません。

chromeの検証で確認したところ、google playバッジの下に小さな余白のようなものがあり、これが原因ではないかと思いました。

※赤い枠の中にある、青でマークされたのが該当箇所です

もしお時間よろしければ、解決方法をご教授して下さると幸いです。
どうぞよろしくお願いします。

《追記》
※ソースコードを記載するのを忘れていました。失礼しました。

html
1<div class="access-site">
2      <a class="apple-store" href="https://apps.apple.com/jp/app/apple-store/id375380948?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2011-09-21&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;"></a>
3      <a class="google-play" href='http://play.google.com/store/?pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Google Play で手に入れよう' src='https://play.google.com/intl/us-en/badges/static/images/badges/ja_badge_web_generic.png' width="170px" height="60px" /></a>
4</div>

css
1.apple-store {
2  padding-right: 50px; 
3}

hatena19

2020/08/15 02:48

その部分のHTMLとCSSを追記してください。

Kindy

2020/08/15 05:14

記載を忘れていました、失礼しました

行動規範の内容に同意します

回答2件

ベストアンサー

apple storeとgoogle playのバッジがそれぞれ実装法が異なるのが原因ですね。

apple store はCSSで背景画像を設定、google play はHTMLにimgタグで埋め込み。
さらにgoogle playは画像のまわり余白か付いています。

これを統一するのが根本的な解決法だと思いますが、とりあえず現状のまま無理やりそろえるなら、下記のCSSでどうでしょう。

css
1.access-site {
2  display: flex;
3  align-items: center;
4}
5
6a.google-play {
7  height:60px;
8}

投稿2020/08/15 05:54

hatena19

総合スコア33699

Kindy

2020/08/15 23:25

ご回答ありがとうございます！原因について説明していただき、ありがとうございますまた、display: flex; のやり方など知りませんでした。勉強になりました

行動規範の内容に同意します

ソースコードがないので勘で答えてみます。
「Google Play」のaタグやimgタグに以下の指定をしてみるといかがでしょうか?

CSS
1.xxxx a,
2.xxxx img {
3  display: block;
4}

.xxxx a, .xxxx imgなどのCSSセレクタを指定してください。

うまく行かなかった場合、以下もためしてみてください。

CSS
1.xxxx a,
2.xxxx img {
3  display: block;
4  margin: 0;
5  padding: 0;
6}

投稿2020/08/15 03:32

new1ro

総合スコア4528

Kindy

2020/08/15 05:21

ご回答ありがとうございます！ソースコードの記載が漏れていて申し訳ございませんでした。にも拘わらず解決方法を提示していただいてありがとうございます。回答についてですが、aタグはもともとinline要素だからblock要素に変更することできれいに横並びに表示できる、という理解でよろしいでしょうか。また、コーディングをやる中で個人的にdisplayを設定しなおすことによってレイアウトが改善される例が多いなと感じました。

Kindy

2020/08/15 05:26

*block要素は縦並びでしたね、失礼しました

new1ro

2020/08/15 23:22

display: block;を指定すると縦並びになるので、親要素にdisplay: flex;などを指定するなどして、ボタンを横並びにしてください。 display: inline;やdisplay: inline-block;を使用すると、 line-heightや、各フォントの影響などにより上下方向に微妙にずれることがよくあります。

行動規範の内容に同意します

あなたの回答