画像のwidthをパーセント指定にすると謎の余白が出る

前提・実現したいこと

画像のwidthをパーセント指定にすると出る謎の余白を消したい

出現・消滅トリガー

下記ソースコードのimgのwidth: 10%;のチェックを検証ツールで外したり入れたりしてみてください。余白が出たり消えたりします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>余白</title>
        <style>
            div,
            img,
            span {
                margin: 0;
                padding: 0;
                line-height: 1;
                vertical-align: top;
            }

            div {
                border: 1px solid blue;
                display: inline-block;
            }

            img {
                width: 10px;
                width: 10%;
            }

            span {
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <div>
            <img src="hoge.svg" alt=""><span>abcdefg</span>
        </div>

    </body>

</html>

試したこと

下記どれもうまくいきませんでした。

imgをfloatしてみる
imgをgifにしてみる
下記URLの通りにimg(svg)にvertical-align:top;をしたり
preserveAspectRatio="none"をしてみる

http://blog.pikuchi.com/2017/06/12/svg%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%99%E7%99%BD%E5%87%A6%E7%90%86/

補足情報

macのchrome最新版で発症しました。
下記スクショの緑の部分がhoge.svgです。

hasue

2018/09/20 01:24

スクリーンショットを添付していただくことは可能ですか？

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

回答2件

ベストアンサー

親要素<div>にwidthが設定されていない場合、自動的に子要素の幅まで領域を確保します。
なので、ここに<img>で画像を貼り付けると、<div>は画像のオリジナル幅を確保します。
その後、CSSによってwidth: 10%が適用されるので、<div>の幅は画像のオリジナル幅(今回の場合は+borderの幅)が確保されたまま、余白ができるという動作になります。

投稿2018/09/20 02:08

編集2018/09/20 02:12

yukihisa

総合スコア672

iiirohanihoheto

2018/09/20 02:34

ご回答ありがとうございます。親要素のdivにwidthを設定すればいいのですね。 <div>のwidth＝img10%の横幅＋赤枠の横幅上記にするにはどうすればいいでしょうか？ちなみに赤枠に入る文字は不確定です。

yukihisa

2018/09/20 02:41 編集

<div>に幅を設定すると文字列が不定長の場合に対応できません。今回の場合はimgの幅をpx指定でオリジナルの10％幅に設定したら良いかと思います。

iiirohanihoheto

2018/09/20 02:52

ご回答ありがとうございます。レスポンシブにしたいので、絶対値ではなく相対値を使いたいです。

yukihisa

2018/09/20 03:03

んむ？そもそも提示の設定ではレスポンシブになりませんよ。どんな画面サイズに対しても「元画像の10％幅」にしかなりません。レスポンシブにしたいのであれば、まず「画面全体のサイズに対してどういう大きさにしたいのか」「段組を変える必要はあるのか」など、ちょっと情報が少なすぎますね。まぁ、とりあえずでいいなら・<div>の幅をパーセント指定する。・画像と文字列をさらに別々の<div>で囲い、それぞれが「親要素の<div>」にたいしてどれくらいのパーセント幅かを指定する・画像のwidthを100％に指定する・文字列を折り返し設定するくらいですかね。

iiirohanihoheto

2018/09/20 03:36

ご回答ありがとうございます。現時点のソースで spanにfont-size:1vw;を追記して画面幅を変えてみると緑の画像が伸び縮みするようになっています。本番環境では文字サイズは可変にしております。テラテイルに投稿するときは関係ないと思って削除しておりました。説明不足で申し訳ありません。

iiirohanihoheto

2018/09/20 03:37

追記：最終的にどういったデザインにしたいか説明しますのでしばらくお待ちいただければ幸いです。なんどもすいません。

iiirohanihoheto

2018/11/04 23:31

時間が取れそうにないので一旦閉じさせていただきます。自己都合でご迷惑おかけし誠に申し訳ありません。

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