空のSPAN要素の「Width指定」が効かないのはなぜ？

法人・ビジネスホームページ・Web制作 2012/12/10 00:37

空のSPAN要素の「Width指定」が効かないのはなぜ？

Span要素を使って、文字と文字の間に、20ピクセルの空白を空けたいのですが、なぜか上手く行かないのです。
HTMLはこんな感じ↓です。

あいうえお<span style="width:20px;"></span>かきくけこ

DOCTYPE宣言を未指定の場合は意図どおりになるのですが、以下のDOCTYPE宣言を指定した場合は上手く行きません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

空のSPAN要素は非推奨なのでしょうか？だとしたら、それはなぜでしょうか…？
以上、よろしくお願いします。

補足

2012/12/10 00:37

芹川様
こちらの方こそ素早いご回答ありがとうございました。
「クセがある」ということは、CSS設計者のセンスがおかしい証拠ですよね。
広く長く使われるCSSの設計者が、このセンスってどうよ？そう思えてしまうことが、私にはありすぎるほどたくさんあります…。

Hajestiaさん（長野県 / 男性 / 31歳）

回答：1件

芹川隆
パソコン講師

ブロック要素とインライン要素をご存知ですか？

2012/12/10 19:43 詳細リンク

: (4.0)

はじめまして、GadgetShopの芹川と申します。

下記ご質問ですが…

>空のSPAN要素の「Width指定」が効かないのはなぜ？
>Span要素を使って、文字と文字の間に、20ピクセルの空白を空けたいのですが、なぜか上手>行かないのです。
>HTMLはこんな感じ↓です。
>あいうえお<span style="width:20px;"></span>かきくけこ

ブロック要素とインライン要素をご存知でしょうか。
width(幅)とheight（高さ）を指定できるのはブロック要素のみで、今回のspanはインライン要素になっております。見た目に関する決まり事はブロックレベル要素、文法上はインライン要素、といったイメージになります。

今回、Hajestiaさんがこのソースのまま空白を空けたいのであれば、インライン要素に「display: inline-block;」という指定が別途必要になります。
※ただし、今回のspan要素は下記理由により別の要素に置き換えて頂くことをオススメ致します。

～説明～
仕様でwidthとheightが指定できるインライン要素は5つあります。

・img要素
・input要素
・object要素
・select要素
・textarea要素
・button要素

今回で言うとspanは適用されない要素になりますので、あいうえおとかきくけこをそれぞれ「div要素」や「p要素」で囲みスタイルを適用してはいかがでしょうか。

----------------------------------------------------------------
今回のように特定の箇所ではありませんが段落の文字間隔を設定する
"letter-spacing"というスタイルもあるのでぜひ調べてみてください。
----------------------------------------------------------------

>DOCTYPE宣言を未指定の場合は意図どおりになるのですが、以下のDOCTYPE宣言を指定した
>場合は上手く行きません。
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >"http://www.w3.org/TR/html4/loose.dtd">
>空のSPAN要素は非推奨なのでしょうか？だとしたら、それはなぜでしょうか…？

DOCTYPE宣言は未指定というのはあまりオススメできません。
きちんと指定してマークアップしていくことをオススメ致します。

こちらで回答になりましたでしょうか。

Gadget Shop 芹川

HTML

仕様

文字

文法

見た目

評価・お礼

Hajestiaさん

2012/12/10 21:28

芹川様
ご回答ありがとうございます。
ブロックレベルとインラインレベルは知っておりましたが、「inline-block」は初耳でした。
手持ちの本にも載ってないので…。ブロックレベルとインラインレベルの中間なのでしょうか？

それにしてもなぜ、Span要素はwidthとheightが指定できない仕様なのでしょう？
Img要素で空白を指定する方法もありますが、そのためにわざわざ透過Gif画像を用意せねばならない。
これは「スマートな仕様」と言えるのでしょうか…？

サイト構築者の「たぶんこうすればいいだろう」という意図と、実際の挙動とが異なる言語は、いい言語とは言えないと思います。
CSSには、そういうところが、多すぎます…。

芹川隆

2012/12/10 21:43

早々なご評価また高い評価を頂きましてありがとうございます。

>ブロックレベルとインラインレベルは知っておりましたが、「inline-block」は
>初耳でした。手持ちの本にも載ってないので…。ブロックレベルとインライン
>レベルの中間なのでしょうか？

こちらはインラインの要素をスタイルでブロック要素にするものです。
例えばリンクなどを設定した場合のクリック範囲を大きくするためなどに設定します。

>それにしてもなぜ、Span要素はwidthとheightが指定できない仕様なのでしょう？
>Img要素で空白を指定する方法もありますが、そのためにわざわざ透過Gif画像を用意せねば>ならない。これは「スマートな仕様」と言えるのでしょうか…？

こちらについては明確な回答がWebデザインやレイアウトを拝見していないのでうまく表現できませんが、仕様という言葉で言い切ってしまうにはあまりにもですよね…。

しかしセマンティクスなマークアップをしているのであれば今回の空のspan要素は使わずに済むと思います。色々な書籍があり、HTML/CSSはレンダリングにくせがあるのでコツコツ付き合っていくしかないと私は思います。