hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

インライン要素のボックスの特徴

インライン要素(<p>など)のボックスは、

ブロックレベル要素 (<a>など)のボックスとは、違った特徴を持っている。

 

◉ インライン要素の主な特徴

 ● width height プロパティを設定することができない。

  仮に指定しても無視される。

 ●インライン要素のボックスは文字部分のみのため、padding プロパティを指定すると

  文字部分の周りに余白を追加する。

  上下左右全てにpadding を設定できるが、上下padding で広げたボックスの領域は

  次に続く内容と重なる

  そのため、罫線や背景が指定されていない場合は、

  上下の padding は有効になっていないように見えてしまう。

 ● 左右 margin は設定することはできるが、上下 margin は設定できない。

  仮に指定しても無視される。

 

 

◉インライン要素が複数行に渡る場合に使う span について

 ● span タグ

   そのタグ自体には意味はなく、範囲を適宜する汎用的なタグとして利用できる。

 

 ※ div タグとの違い

   同じようにそのタグ自体に意味を持たない div タグはブロックレベル要素。

   したがって、インラインレベル要素である span との違いに注意。

   span は主にマークアップする場合に用いる。