初心者のスタイルシート(CSS)講座:ボックスの高さと幅

・width/height
 領域の高さと幅を指定する

【ボックスの高さと幅を指定する方法】
height:キーワード、又はサイズを表す数値+単位
width:キーワード、又はサイズを表す数値+単位

【キーワード】
auto・・・・・・ブラウザが自動でサイズを決定する。

【サイズを表す数値+単位】
数値+単位・・・・数値に単位をつけて大きさを指定します。

数値+%・・・・・親要素の高さや幅に対する割合を指定します。

 要素の内容が表示されるボックスの幅と高さを指定します。これらのプロパティはブロックレベル要素と置換要素(指定された内容で置換される要素。たとえばimg要素はsrcで指定された内容に置き換えられる。)に対して適用されますが、 widthは非置換インラインレベル要素や、テーブルの横列と横列グループに関する要素(tr、thead、tbody、tfoot) heightは非置換インラインレベル要素や縦列に関するcol要素、colgroup要素には適用されません。

 widthは非置換インラインレベル要素や、テーブルの横列と横列グループに関する要素(tr、thead、tbody、tfoot)に、heightは非置換インラインレベル要素や縦列に関するcol要素、colgroup要素にとそれぞれ個別に設定する必要があります。(スタイルシート(CSS)の外部リンクで設定する場合は個別に設定しなくてもよい場合があります)

em その要素のfont-sizeの値を1とする
ex その要素のx-height(小文字のxの高さ)を1とする
px コンピュータ画面の1ピクセルを1とする
% 属性によって異なるが、多くの場合は親要素の1部分を基準とした割合
in インチ(1pt=2.54cm)
cm センチメートル
mm ミリメートル
pt ポイント(1pt=1/72in)
pc パイカ(1pc=12pt)