IDをspanとdivに適用させると表示はそれぞれ違いますか？？

質問

WEBを勉強中です。
spanとdivにそれぞれ外部ファイルで

#header{height:100px;border-top:20px solid #99ff66;}

と適用させたんですがspanだけborder-top:20px solid #000000の表示が出ませんでした。
spanはインライン要素だからIDは使えないということでしょうか？？
<span id="header">
と本文に記入したんですが、、、

回答No.2

leap_day · ベストアンサー

こんにちは

<span>の場合はwidth,height指定がしにくいので表示は異なります

borderがでないのではなく表示が違うのです
実際にborder-topでは無くborderとかで試してみたら分かると思うのですが
divがデフォルト100％に対しspanは<span> </span>内に書かれたテキストの長さ分しかborderは出ていないと思います
改行とかすると1行ずつにborderがでてborderの下に書かれてあるテキストは見えなくなってしまいます
そしてborder-bottomは利いていない部分もあります（IE)

同じようにするならば強制的にブロック要素にすれば出来ることはできます
display:block;
を使って・・・

お礼

回答ありがとうございます。
返事が遅くなりまして申し訳ありません！

なるほどおかげさまでインライン要素のタグに対する理解が深まりました。
どうもありがとうございました。

回答No.3

三郷北 M君（@mkun55555）

spanはインライン要素なのでheigtは使えない。
高さは文字の大きさで、決まる。
divはブロック要素なのでheightが使える。それだけの違いです。
spanでもID、classともに使えます。

参考URLでは
<span class="bw2">・・・</span>として
外部CSSで
.bw2{background-color:RGB(35,35,90); color:RGB(255,255,200);
border-top:2px solid RGB(250,150,150);border-bottom:3px solid RGB(250,150,150);
margin:20px 5px 20px 0px; padding:0px 5px 0px 5px;line-height:1.8em;}としています。
IDの場合は、
.bw2を#bw2にします。

参考URL：

http://www7a.biglobe.ne.jp/~mkun/google/hit_m/hit142.htm

お礼

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

なるほどインライン要素でもＩＤ、classが使えるんですね。
よくＤＩＶに適用してる参考書が多いのでそれも
疑問に思っていたことでした。
どうもありがとうございました。

回答No.1

yambejp

>spanはインライン要素だからIDは使えない

インライン要素だからborderは適切に反映されないのではないですか？
普通はブロック要素ですよね？

補足

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

あ、そういうことなんですか？？

インライン要素は領域を持たないからボーダーが適用されない
という考えでいいんでしょうか？？