質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1617閲覧

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

iiirohanihoheto

総合スコア13

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/09/19 07:43

編集2018/09/20 01:41

前提・実現したいこと

画像の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です。

緑の部分がhoge.svgです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hasue

2018/09/20 01:24

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

回答2

0

ベストアンサー

親要素<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

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

0

10%無効(10px)のときは、画像の高さがテキストの高さよりも低くなるため
画像の下端はテキストのベースラインに揃えられています。
しかし、10%を有効にしたときは、画像の高さがテキストの高さを超えてしまい
同じ行の中に異なる高さのものが存在するため、余白が出来たという形になります。

Windows版Chromeでは画像サイズを大きくしても
画像の下端がテキストのベースラインに揃えられていましたが
Mac版Chromeだと確かに、添付画像のようにテキストが上揃えになりますね。

今回のHTMLでいけば、spanの方にvertical-align:bottomを指定すれば
画像の下端とテキストの下端は揃います。
しかし、今度は逆に上の方に余白ができてしまうと思います。

もし、画像の高さとテキストの高さを揃えたいのであれば
imgにmax-height:1em;などを追加するといいと思います。
その場合、実際に表示される画像の幅は10%以下にはなってしまいます。

追記:
すみません、横幅のことだったんですね。
別の回答者さんが書くまで、縦ばかりに目が行ってしまっておりました・・・。

投稿2018/09/20 02:05

編集2018/09/20 02:11
hasue

総合スコア155

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iiirohanihoheto

2018/09/20 02:31

ご回答ありがとうございます。 言葉足らずですみませんでした。 おっしゃる通り「g」の右側に出る余白のことです。 申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問