alt属性を入れると空白ができる

Question

WordPressでサイトを作っています。

元々空だったimgタグのalt属性に、テキストを入れると、＆nbsp;が4つぐらい勝手に入ってデザインが崩れてしまいます。
なぜaltを設定すると＆nbsp;が入るのでしょうか？

Comments

[Lhankor_Mhy]

コードをご提示ください。

[Goethe]

すみません！　altにある何かしらの仕様かと思って、テキストだけの質問になってしまいました。

「解決した方法」に書いたのですが、もともと空だったaltにテキストを追加すると、imgタグがスペースをあけてコードを書いていると認識されてしまいます。この原因がまだ分からずじまいです。

[Lhankor_Mhy]

ご解決されて何よりです

Answer 1

【問題のコード】

    <div class="header">
        <div class="header-logo">
            <img src="/images/logo.png" alt="サンプル" class="logo logo-mark">
        </div>
    </div>

【解決したコード】

    <div class="header">
        <div class="header-logo"><img src="/images/logo.png" alt="サンプル" class="logo logo-mark"></div>
    </div>

問題のコードは、もともとaltを空にしていました。そこにaltにテキストを入れると、なぜか<img>タグの左側が全部スペース扱いになっていたようです。

全部横並びに書くと、問題は解決しました。

Answer 2

ちょっと状況がわかりかねますが
imgタグなのですからwidthやheightを設定してあげればよいのでは？

Comments

[Goethe]

回答ありがとうございます。

全部横並びに書いたら治りました。altをいれると、なぜか入れ子構造がスペース扱いになってしまうようです。。。

[yambejp]

いずれにしろimgによるレイアウトのずればwidth/heightを入れるのが原則です