- ベストアンサー
div要素の前後に1行空きますか？
いろいろなサイトや参考書を見ると、 「div要素は、ブロックレベル要素なので、前後に改行が入ります。」 と書かれている事を多く見かけます。 しかし、実際には、前後1行空かないですよね？ 何故でしょうか？ ちなみに、何故ブロックレベル要素では、1行空くのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
1行空くのと改行が入るのは別物です。 --------------- あああいいいううう これは改行も1行空いてもいません。 -------------- あああ いいい ううう これは『いいい』の前後に改行が入っています。 ------------------ あああ いいい ううう これは、『いいい』の前後に1行空いています。 （言い換えると、『いいい』の前後に改行が２つずつ入っています。） >ちなみに、何故ブロックレベル要素では、1行空くのでしょうか？ 改行は入りますが1行空きませんので、質問者さんの誤解です。 ※改行が入る事（改行されているように見える事）と、"改行コード"が入る事は別物です。念のため。 ブロック要素は「改行されているように見えます」が、"改行コード"が入っているわけではありません。
その他の回答 (3)
- DrFell
- ベストアンサー率55% (305/551)
ブロックレベル要素はわかりやすいイメージでは塊・箱です。前と後で区切られる縦何センチ横何センチと指定できる（しなくてもそう表せるような表現になる）ものです。 ブロックレベル要素と対で説明されるものにインライン要素があります。これは縦何センチ横何センチにはなりません。行内要素とも呼ばれ、行末・行頭に分かれてしまうこともあります。 ブロックレベル要素とインライン要素のわかりやすい表現として「改行が入る」と説明されているのではないでしょうか？独立した塊を表現するのにインライン要素の改行が入らないものと比べて「改行が入る（行が改まる）」と説明しているように思います。 Q：しかし、実際には、前後1行空かないですよね？ 初期値では殆んどの要素がpaddingやmarginなどでインライン要素の改行より開いて見えるように定義されています。cssで空間をつめたりすると空いて見えないですが、インライン要素に比べ改行が入っているように見えることはご理解いただけますでしょうか？ ブロックレベル要素とインライン要素は、基本ですが、中級者でもわかっていない方が多く、性質の違いを知らない故に正しいはずなのに指定が効かないと悩む方を見受けます。例：要素によりセンタリングの仕方が違います。インライン要素ではwidth等は無視されます。 インライン要素「strong・a(href)……」 ブロック…要素「h1・ul・li・table……」 インラインブロック要素「img」（外向きにはインライン要素、自身にはブロック要素となる。imgを文章の途中でも入れることができるが、自身にはwidthなども有効となる。） 参考urlでは、より詳しく説明しています。が、文章を読んでも、図解があっても、対面でも1度や2度の説明では理解されない方も多いです。根気よく挑戦してください。 はやく疑問が解けるといいですね
お礼
DrFellさん、お礼遅くなりました。 完全な私の勘違いです(^_^;) 1行空くのと、改行の勘違いをしておりましたm(__)m 回答ありがとうございましたm(__)m
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞何故でしょうか？ 分からないときは、とにかく仕様書に目を通す。 ⇒HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc ) 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。 この違いは、幾つかの点から明らかにされる。 内容モデル 一般に、ブロックレベル要素は行内要素及び他のブロックレベル要素を内容に取り得る。一般に、行内要素は単なるデータ及び他の行内要素を内容に取り得る。 この構造的な性質の違いから、ブロック要素は行内要素よりも「大きい」構造を生成する、と言える。 整形 デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。 空白、line break、ブロック整形について、より詳しくはテキストの項目を参照されたい。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )］より <p>たとえば、段落(p)要素はブロック要素です。そのため、このように前後をで囲まれていると新しい行が始まります。</p> そのときに、この段落(p)に対して、スタイルシートにmargin-top:1em;margin-bottom:1em;と書かれていると前後にマージンがとられます。・・・・そんなもの書いた記憶がない？----いえいえ、スタイルシートはブラウザ自身があらかじめ持っているのです。これも仕様書に書かれていますが pに対しては、display:block; とmargin: 1.33em 0;ですね。一方のdivに関してはdisplay:blockしかありません。 ⇒HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html ) CSSはカスケーディングと言う極めて便利な機能を持ちます。そのひとつが ユーザーの最重要宣言したスタイル＞著者の最重要宣言スタイル＞著者のスタイル＞ユーザーのスタイル＞ブラウザのスタイル という仕組みがあります。 ⇒カスケード処理（The cascade）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade ) それによって、スタイルシートを指定するとブラウザのもつスタイルを上書きできるのです。 ※「ブロック要素では一行あける」と書かれているマニュアル・サイト・書籍があるとしたら、その時点でそのマニュアル・サイト・書籍は失格です。基本的なことすら理解していないことが明白です。 それによって、改行を<br>で行い、行間を空けるとき<p>を使用するという変なHTMLになってしまいます。これは明らかに誤りですね。行間はline-heightで指定すべきで、ブロック間はmarginで指定すべきです。 そのような「サイトや参考書」は即刻ゴミ箱へ・・・ ＞ちなみに、何故ブロックレベル要素では、1行空くのでしょうか？ ブロック要素に限らず、スタイルシートでマージンが指定してあるからです。一行空くわけではありません。 ちなみに・・、日本語はフォントが大きく、また新しい段落は一文字インデントさせる慣習なので p{margin:0;line-height:1.6em;text-indent:1em;} のようにしてしまうと良いでしょう。
お礼
ORUKA1951さん、お礼遅くなりました。 いつも、丁寧にご説明いただきありがとうございます。
- gungnir7
- ベストアンサー率43% (1124/2579)
あれはmarginとpaddingの初期値の違いですね。 改行は入りますが、一行空くという意味ではないですよね。 本来はどちらも同じ。marginとpaddingで調整するものです。 下のソースをコピペしてスタイルを除去したのと比べれば動作確認が採れると思います。 <!doctype html> <html lang="ja"> <meta charset="UTF-8" /> <STYLE type="text/css"> <!-- div, p { margin: 0; padding: 0; } --> </STYLE> <body> <p>あああああ</p> <p>いいいい</p> <p >うううう<br /> ええええ </p> </body> </html>
お礼
gungnir7さん、お礼遅くなりました。 改行と、1行空く。 私の勘違いです(^_^;) 回答ありがとうございましたm(__)m
お礼
talooさん、お礼遅くなりましたm(__)m ＞改行は入りますが1行空きませんので、質問者さんの誤解です。 そうですね。私の勘違いです(^_^;) CSSの前に、日本語をちゃんと読まないといけないですね。 ありがとうございました。