Search
  1. width/height〔要素の幅・高さ〕
  2. max-width/max-height〔要素の最大幅・最大高さ〕
  3. min-width/min-height〔要素の最小幅・最小高さ〕
  4. !DOCTYPEによるブラウザのpaddingの解釈の違い

width/height
要素の幅・高さ

unknown

width: <length> | <%> | auto
height: <length> | <%> | auto

widthプロパティ、heightプロパティは、要素の幅・高さを指定します。

  • デフォルト値:auto
  • 適用:全要素(非置換インライン要素、テーブル行、行グループを除く
  • 継承:しない

width/heightプロパティの値
説明
auto自動調整。
<length>em、pxなど。 ※負の値指定不可。
<%>親要素を基準に%指定。

widthプロパティを絶対サイズで指定する場合は、!DOCTYPEが互換モードの場合ブラウザによってpaddingの解釈が異なることに注意して下さい。 詳細は、!DOCTYPEによるブラウザのpaddingの解釈の違いで解説しています。

<style type="text/css">
	.whButton   { width:auto; height:30px; }
	.whTextarea { width:80%; height:5em; }
	.whSelect   { width:200px; }
	.whTable    { width:auto; }
</style>

<p>
	<input type="button" class="whButton" value="ボタン" />
</p>
<p>
	<textarea class="whTextarea">width:80%; height:5em; を指定しています。</textarea>
</p>
<p>
	<select class="whSelect">
		<option value="">▼選択してください</option>
		<option value="1">項目1</option>
		<option value="2">項目2</option>
		<option value="3">項目3</option>
	</select>
</p>
<table class="whTable" border="1">
	<tr><td>あああ</td><td>いいい</td></tr>
	<tr><td>あああ</td><td>いいい</td></tr>
	<tr><td>あああ</td><td>いいい</td></tr>
</table>

あああいいい
あああいいい
あああいいい

max-width/max-height
要素の最大幅・最大高さ

unknown

max-width: <length> | <%> | none
max-height: <length> | <%> | none

max-widthプロパティ、max-heightプロパティは、要素の幅・高さの最大値を指定します。

  • デフォルト値:none
  • 適用:全要素(非置換インライン要素、テーブル行、行グループを除く
  • 継承:しない

max-width/max-heightプロパティの値
説明
auto最大幅・高さの制限をしない。
<length>em、pxなど。 ※負の値指定不可。
<%>親要素を基準に%指定。
<style type="text/css">
#d_maxwh {
	margin:0; padding:0;
	background:#fff url(/content/img/grid.gif) repeat top left;
	width:100%; height:200px;
}
#d_maxwh div {
	margin:0; padding:0;
	background:yellow;
	max-width:300px;
	max-height:20px;
	/* IE対応 */
	width:auto!important;
	height:auto!important;
	width:300px;
	height:20px;
}
</style>

<div id="d_maxwh">
	<div>
		max-width:300px;<br>
		max-height:20px;
	</div>
</div>
max-width:300px;
max-height:20px;

min-width/min-height
要素の最小幅・最小高さ

unknown

min-width: <length> | <%> | inherit
min-height: <length> | <%> | inherit
IE未対応

min-widthプロパティ、min-heightプロパティは、要素の幅・高さの最小値を指定します。

  • デフォルト値:0
  • 適用:全要素(非置換インライン要素、テーブル行、行グループを除く
  • 継承:しない

min-width/min-heightプロパティの値
説明
auto最小幅・高さの制限をしない。
<length>em、pxなど。 ※負の値指定不可。
<%>親要素を基準に%指定。
<style type="text/css">
#d_minwh {
	margin:0; padding:0;
	background:#fff url(/content/img/grid.gif) repeat 0 0;
	width:100%; height:200px;
}
#d_minwh div {
	margin:0; padding:0;
	background:yellow;
	min-width:300px;
	min-height:100px;
	/* IE対応 */
	width:auto!important;
	height:auto!important;
	width:300px;
	height:100px;
}
</style>

<div id="d_minwh">
	<div>
		min-width:300px;<br>
		min-height:100px;
	</div>
</div>
min-width:300px;
min-height:100px;

!DOCTYPEによるブラウザのpaddingの解釈の違い

unknown

!DOCTYPEに互換モードを指定している場合、IEではwidthで指定した値にpaddingで指定した値が含まれます。 一方、FirefoxやNetscapeではwidthで指定した値+paddingで指定した値という風に解釈されます。

!DOCTYPEに標準モードを指定している場合は、IE、Firefox、Netscape全てwidthで指定した値+paddingで指定した値になります。

例えばwidth=100px、padding=20pxを指定した場合、以下のようになります。

<style type="text/css">
    *,body {
        margin:0; padding:0;
    }
    div.grid {
        margin:0; padding:0;
        background:#fff url(/content/img/css/grid.gif) repeat top left;
        width:400px; height:400px;
    }
    div.box1 {
        margin:0; padding:20px;
        background-color:orange;
        width:100px; height:100px;
    }
</style>

<div class="grid">
    <div class="box1"></div>
</div>
表示のされ方
  IE Firefox、Netscape




width(100px)にpadding(20px)も含まれるため、そのままwidth=100pxになります。

width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。





width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。

width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop