*

HTML

webkit系のデフォルトスタイルシート

webkit系のデフォルトスタイルシート

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

画像下部の標準で挿入されるスペース (HTML)

画像下部に標準で挿入されるスペースは、マージンやパディングではない。

画像は、インラインブロックボックスで構成されるため、文字や画像と横に並べて表示される。

このとき、画像の下辺が文字のベースラインにそろえて表示されるため、ページラインから下のスペースが画像の下に挿入される。

ベースラインより下のスペースを画像に挿入しないようにするためには、vertical-alignを「bottom」に指定する。

 

なお、HTML4.01やXHTML1.0で作成したページの場合で文字を横に並べずに画像のみを表示した場合は、主要とするブラウザではスペースは挿入されない。

しかし、HTML5で作成したページは、スペースが挿入される。

<img>タブ (HTML)

画像を表示する<img>が構成するボックスは「インラインブロックボックス」と呼ばれ、ブロックボックスとインラインボックスの両方の特徴をあわせ持ったものになっている。

  • インラインボックスと同じように前後に改行が入らず、文字などと並んで表示される。
  • ブロックボックスと同じように、スタイルシートで横幅や高さを指定できる。
  • マージンやパディング、罫線を挿入すると、まわりのコンテンツの配置に影響する。
  • ただし、インラインブロックボックスには、「上下のマージンは、大きい方のマージンが採用され、重ねて表示される」という決まりは、適用されない。

区切り線(HTML)

HTML4.01やXHTMLの時、区切り線に<hr>タグを使用していたが、HTML5では、<hr>タグは、場面転換といった段落の論理的な区切りを示すものと定義されているので視覚的なデザインを施すために利用してはいけない。

「見出しと文章を区切る」といった視覚的な目的にはスタイルシートでborderプロパティ指定する。

 

ブロックボックスとインラインボックス(HTML)

ブロックボックス

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

インラインボックス

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