ブロックレベル要素とdisplay:block;

質問

ブロックというものがよくわかってないのですが、スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか？
タグによっては、「インライン要素を含むことはできません」などの制限のあるものがあると思いますが、スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか？
またそもそも、元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか？

回答No.4

abril · ベストアンサー

> 元々ブロックレベルである要素と、display:block;によってブロックレベルにしたインライン要素は、同じと考えてもいいのでしょうか？

違います。HTMLの文法上のルールと、CSSのプロパティの性質は全く別の問題ですので、先ずはそこを切り分けて考えて下さい。

> スタイルシートでdisplay:block;とした場合、インライン要素でもブロックレベル要素になるということでしょうか？
> スタイルシートでdisplay:block;として、インライン要素をブロックレベル要素にした場合はどうなるのでしょうか？

HTML上インライン要素であるものは、あくまでインライン要素ですので、CSSでdisplayプロパティを変更したとしても、HTML文書としてそれぞれの要素に決められた文法に影響を与えるものではありません。
例えばインライン要素であるspanに対して"display: block;"を設定しても、HTMLのマークアップを下記の様にできるわけではないという事です。
【誤】
<span>内容<p>内容</p>内容</span>

"display: block;"は、あくまでその要素が生成するボックスの”表示形式”に”ブロック要素としての性質”を持たせるだけです。
例えば、下記の様なマークアップがあったとします：

<p>内容1<span>内容2</span></p>

CSSで何もdisplayを変更していなければ：
【表示結果】（改行されずに内容1と内容2が続く）
内容1内容2

となりますが、spanのdisplayプロパティをディフォルト値のinlineから変更して"display: block;"と設定してあれば：

【表示結果】
内容1（改行）
内容2

と、「あたかもブロック要素の表示の様に」なるという事です。

お礼

回答ありがとうございます！とてもわかりやすくて、htmlのブロックレベル要素とcssのblockについてがちゃんと整理できました！

回答No.3

MAN_MA_RUI

インライン要素の中にブロック要素を含めないと言うのはHTMLの構造の問題だと思います。
単体でインライン構造を持った要素の中に単体でブロック構造を持った要素（タグ）を入れるなと言うだけで、インライン構造の中にブロック構造を含んではいけないと言う問題ではないんじゃないかな。

お礼

回答ありがとうございました！参考にさせていただきました。

回答No.2

yambejp

スタイルシートでいくらブロック要素化しても構造上の問題なので、
解決しません。
インライン要素を含むことができないタグには、一度ブロック要素の
タグを入れ込んだ上でその中にインライン要素を書き込んでください。

お礼

回答ありがとうございました！参考にさせていただきました。

回答No.1

gtrans

それほどHTMLのエレメントの勉強をしたわけではありませんが、おおよそdivになると解釈して十分だと思います。
　本来 block で無いものを block として扱いたい、そのために作られた機能と解釈すれば、インラインをブロック化できない方が変に感じるようになるかも知れません。

　ところで今検索していて気がついたのですが、新しくinline-blockというブロック回り込みが追加されていたんですね。
　何かの参考になるかも知れないのでURLを貼っておきました。

参考URL：

http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20372850,00.htm

お礼

回答ありがとうございました！参考にさせていただきました。