cssのdisplay:block

質問

はどんなときに使うんでしょうか？

回答No.4

ORUKA1951

まず、HTMLの基本知識として要素の分類があります。
　まっとうなマニュアルなら、イの一番に書かれています。
文書は要素(element)の集合体です。

文書を形成する要素にはブロック要素、行内要素があります。
　CSSでは、テーブル要素、段落要素などさらに細かく種類があります。
　マークアップするときは常に考えておくべきです。
要素はタグで囲んで示します。
　<p>文章で<strong>ここは重要</strong></p>
HTMLでは終わりのタグを省略できるものがあります。たとえば段落を示す<p>は内部に行内要素を持ちませんから、次にブロック要素などが出てくると</p>があるものとみなします。

それぞれの要素には何を含めることができて、なにを含められないかが決まっています。(常識範囲内ですが)
　<ul>には<li>以外含まれない
　<p>には、ブロック要素はもてない
　仕様書にすべて書いてあります。
<!ELEMENT P - O (%inline;)* -- paragraph -->
　　9.3.1 段落: P要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-P )より
「要素Pは終了タグは省略できる、含まれるのは行内要素、段落を示す」と読みます。
<!ELEMENT UL - - (LI)+ -- unordered list -->
　　10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )より
「要素ulは終了タグを省略できる。liを一個以上もつ　順不同リスト」と読みます。

　HTMLはこの様に、文書構造にしたがってマークアップすべきです。
　一般的にブロック要素は前後に大きめらマージンをとって区別されます。

　が、デザインするときは、行内要素であってもブロックとして扱いたいもの、箇条書きやその段落であってもブロックにしたいものがほしいときがあります。
　そのようなときにdisplay:block;とします。
視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html )
をよく読むこと。
　displayのとりうる値は
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
です。
　それぞれが何であるかは仕様書をお読みください。

回答No.3

steel_gray

#2です。
http://allabout.co.jp/internet/hpcreate/closeup/CU20020709A/
参考リンク、こっちの方が一般的でした。

回答No.2

steel_gray

インライン要素をブロック化したいとき。
よく見るのはアンカー（リンク）のブロック化ですね。
http://allabout.co.jp/internet/hpcreate/closeup/CU20031124A/

お礼

ありがとうございます。丁寧に教えていただき、とても参考になりました。

回答No.1

kuzumiHK

<p>ああああああ<img></p>

↑のimgの天地の余白を設定するには、
あらかじめimg自体に余白が設けられているか、
タグを下記のように組みなおさなければなりません。

<div>
<p>ああああああ</p>
<p><img></p>
</div>

しかし、「ああああああ」と<img>がひとつの内容だった場合、
段落で区切ること自体が論理的におかしいということもいえます。
そこで、imgにdisplay:block;を設定してimgの天地にimg自体で余白を設けます。

p img{
display:block;
margin:8px;
}

最近は、文法や文書構造にもこだわる企業が増えてきていますが、
その上でテーブル組みのような細かいレイアウトも求めてくるため、
無駄なタグを増やさずに細かいレイアウトを再現するには欠かせないスタイルとなっています。

本来は、スタイルの役目としてすべてのブロック要素、インライン要素が、
見た目の上ではどちらにも変更できて自由にレイアウトできるのが理想なのですが、
ブラウザごとに表示が違ったり、
htmlの文法上正しい表示と言われているFirefoxでさえ、
legendタグなどにdisplay:blockが効かないという
レイアウトの不自由が発生しています。

文法を遵守させたいのであれば文法を遵守しながらでも、
どんなレイアウトも再現できるスタイルがあるべきなのですが、
今は完璧ではありません。

どちらにしてもdisplay:block;は結構使えるスタイルだと思います。

お礼

ありがとうございます。丁寧に教えていただき、とても参考になりました。