• 締切済み

ブロックレベル要素の前後のスペース(余白)のことで

ブロック要素の場合は、前後に改行が入るのはわかりましたが、同じブロックレベル要素でもpタグは前後に余白?空白行?が入ります。divやaddressも同じブロックレベル要素なのに、こちらは段落の前後にあきが出ません。 ブロックレベル要素に共通なのは、前後で改行されるということだけで、前後に1行?あいてしまうかどうかは、要素によってマチマチということなのでしょうか。 ※Win7、IE8使用

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

附記A: HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )  をご覧ください。  改行とブロック要素の境界はしっかり区別をつけましょう。 ブロック要素では、『新しい行が開始される』です。  →7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )

usausa7
質問者

お礼

質問の仕方があいまいだったようで申し訳ありません。 【ブロック要素では、『新しい行が開始される』です。】は、わかっているのですが、その行(段落)の上下のことでお聞きしたかったのです。 でも、回答いただいてありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • notnot
  • ベストアンサー率47% (4856/10272)
回答No.1

そうですね。それぞれのタグに対してのデフォルトのスタイルはブラウザによって違うようです。 なので、div と p で見え方に違いがあるかどうかはブラウザ依存です。たいていのブラウザでは違いがあると思いますが、同じに見えるブラウザがあってもおかしくありません。 見え方の違いは改行というか、余白(margin padding)の量の違いです。 スタイルで、 div, p { margin: 0; padding: 0; } と指定しておけば、(ブラウザに依らず) div と p は前後のスペースに関して同じ見え方になります。

usausa7
質問者

お礼

ありがとうございます。 通常は、私も必要に応じて要素ごとにデフォルトのリセットでブラウザ間の違いを最小限にするようにして作っています。その後はmargin、paddingなどで調整すればいいので、それは問題ないのですが、ただ、本やサイト内のどこの説明を見ても「ブロックレベル要素は必ず上下(前後)にスペースが入る」といったようなことが書かれているので、突然疑問に感じてしまいました。 それも、IE,Firefox,Chromeのどれで見ても、addressタグは前後にスペース入らないし・・・・。 ほんと、些細なつまらない疑問かもしれませんが、回答くださってありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • div要素の前後に1行空きますか?

    いろいろなサイトや参考書を見ると、 「div要素は、ブロックレベル要素なので、前後に改行が入ります。」 と書かれている事を多く見かけます。 しかし、実際には、前後1行空かないですよね? 何故でしょうか? ちなみに、何故ブロックレベル要素では、1行空くのでしょうか?

    • ベストアンサー
    • HTML
  • ブロックレベル要素とdisplay:block;

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

    • ベストアンサー
    • CSS
  • XHTMLでは、インライン要素は必ずブロックレベル要素内に記述となっていますがこの場合は?

    XHTMLについて教えてください。 XHTMLでは、インラインレベル要素は、必ずブロックレベル要素内で記述されなければなりませんが、こういった場合(以下参照ください)の書き方は、どちらが正しのでしょうか? まずCSSを、 #hoge{ width:200px; background-color:#000000; } と設定したと仮定します。 で、XHTMLですが・・・ -----サンプル1----- <div id="hoge"> <p><img src="写真とか.gif" alt="" width="10" height="10" /></p> <h1>タイトル</h1> <p>テキストテキストテキスト・・・・・</p> </div> -----サンプル2----- <div id="hoge"> <img src="写真とか.gif" alt="" width="10" height="10" /> <h1>タイトル</h1> テキストテキスト </div> あと、ブロックid“hoge”内に一つだけインライン要素を配置する場合・・・ -----サンプル2----- <div id="hoge"> <p><img src="ボタン.gif" alt="" width="10" height="10" /></p> </div> -----サンプル2----- <div id="hoge"> <img src="ボタン.gif" alt="" width="10" height="10" /> </div> 要するに、CSSの設定を呼び出すために<div>で括っている場合は、それぞれのサンプル2のように既にブロックレベル要素内に収まっている」ということになるのでしょうか? それとも、やはり、サンプル1のよう記述するのが正しいのでしょうか? 説明が分かりにくくて申し訳ございませんが、ぜひアドバイスくださいますようお願いいたします。

    • ベストアンサー
    • HTML
  • ブロック要素を含むボックスを作るときの注意点は?

    現在お店のHPを製作中です。  で、リストや<h>や<div>の入ったボックスを組むのに<p>タグでくくったのですが、うまくいきませんでした。  これはブロック要素をインライン要素でくくってはいけないということだったようです。  そこで、ボックスの中にはブロック要素はなるべく入れないほうがいいのでしょうか?それとも同じくブロック要素のタグでくくってやれば特に問題はないのでしょうか?  なにぶんこの件で初めてブロック要素・インライン要素という言葉を知りました^^;  他にも注意するところがあったら教えてほしいです。  よろしくお願いします。

    • ベストアンサー
    • HTML
  • 「インライン要素」と「ブロック要素」の違いは何

    SPANタグの意味を調べたくてググったら http://www.htmq.com/html/span.shtml を見たのですが、 divタグと、SPANタグの違いがよくわからないのですが、 「インライン要素」と「ブロック要素」の違いは何でしょうか?

    • ベストアンサー
    • CSS
  • CSSでブロックレベル要素をロールオーバーさせる

    こんにちわ アンカータグにマウスが乗った場合に、 属する親ブロックレベル要素のスタイルを変更するのは どのように行うのでしょうか? #HTML <div class="box"> <p>タイトル</p> <p><a href="#">あいうえお</a></p> </div> #CSS 通常時 div.box{ border: 1px #dddddd solid; } ロールオーバー時 div.box{ border: 1px red solid; }

    • ベストアンサー
    • HTML
  • 段落タグ<p>について教えてください。

    昔、どこかのサイトで<p>タグは必要不可欠のものだ、との記述を見たことがあります。例えば <h1>タイトル</h1> <h2>サブタイトル</h2> <p>説明文</p> のように。必ず<p>タグで文章をくくらなければいけない、 というのが、『本来』の規則なのでしょうか。(←質問1) もしそうだとして、テーブルやリストなども<p>でくくるのですか? (↑質問2) また、<div>を使い1つの段落をブロックとしてまとめる(?)ときも<p>を使うのでしょうか、それは<div>の外側と内側、どちらに書くべきですか?(←質問3) 上記の質問はインライン要素、ブロック要素というようなものと関係があるのですか?(←質問4) 最後に、複数の改行を行うとき、<br>の連続は禁止されていますが、スペースだけの段落で改行を演じるのはどうなのでしょうか。(質問5) 長くなりましたが、簡単にでいいのでよろしくお願いします。

  • CSSのブロックレベルとインラインレベル

    今CSSをやろうとしているのですが diplayタグがいまいちわかりません display:inline disilay:blockでは インラインレベル要素として使う ブロックレベル要素として使うと 参考書には書いてありました それでインラインとブロックレベル要素とはなんでしょうか? そもそも要素自体よくわかってないのですが この二つの違いがよくわかりません

    • ベストアンサー
    • CSS
  • <p></p>段落タグの携帯での表示について

    携帯HPを作成しています。 段落タグ<p></p>は使用すると前後に空白ができるとありますが、携帯で表示するとただなんの空白もなく改行されているだけでした。 パソコンで表示したときはちゃんと空白があります。 携帯では空白がでない用になっているのでしょうか? また携帯で空白をあけたい場合には、改行タグ<br>を使ってあけるべきでしょうか? 回答お待ちしております、よろしくお願いいたします。

  • タグ前後で自動改行されない

    <p>……あいうえお<em>かきくけこ</em>さしすせそ……</p> 文章の自動改行のことで質問です。 ブラウザのすみをつまんで、いろいろな横幅での見え方を確認しています。 インライン要素のタグ前後のところでちょうど改行させたくて、できないでいます。 …………………………あいうえお かきくけこさしすせそ………… のように、ちょうどインライン要素のタグがあるところで改行するようにしたいのですが、そうならずに ……………………………あいうえ おかきくけこさしすせそ…… のようになってしまいます。 解決できる方、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS