ブロックボックスとインラインボックス

ブロックボックス

• 通常、ウィンドウ幅いっぱいの長方形ボックスを構成します。
  • 横幅はブラウザ画面や親要素に合わせて、高さは中身のコンテンツに合わせて表示されます
  • ただし、横幅と高さはスタイルシートのwidthとheightプロパティで調整することが可能です。
• マージンやパディング、罫線を挿入するとまわりのコンテンツの配置にも影響するため、これらを組み合わせてページのレイアウトを調整する必要があります。
• 前後にあるボックス構造の要素との間に改行が入ったように表示されます。

インラインボックス

• インラインボックスは、要素を1行ずつ行ボックスを構成します。
• 前後に改行が入らず、文字や画像などと並んで表示されます。
• 横幅や高さは中身のコンテンツに合わせで決まり、スタイルシートで調整することはできません。
• マージンやパディング、罫線を挿入すると左右のコンテンツの配置に影響しますが、上下のコンテンツの配置や行の高さには影響しません。

インラインボックスの中にブロックボックスが存在する場合

• CSSでは、インラインボックスの中にブロックボックスが存在する場合、親要素のインラインボックスの背景や罫線の設定は、子要素のブロックボックスの部分には作用しません。
• ＜a＞は、デフォルトスタイルシートでインラインボックスを構成するため、＜a＞を親にもつ＜h1＞＜p＞などのブロックボックスは、＜a＞で指定したデザインは反映されません。今回、反映されるのは、インライン要素である＜time＞要素のみとなります。
  • ＜ａ＞・・・インラインボックス（デザイン指定）
  • 　＜ｈ１＞・・・ブロックボックス
  • 　＜ｔｉｍｅ＞・・・インラインボックス（反映されるのはこの要素だけ）
  • 　＜ｐ＞・・・ブロックボックス
  • ＜／ａ＞