CSS 幅と高さを指定するサンプル(widthとheight)

CSSの幅と高さを指定するサンプルです。
幅はwidthプロパティ、高さはheightプロパティを使用します。

width / height プロパティ

width : 値
height : 値

値	説明
数値 + 単位	指定した単位で設定します。
数値 + %	包括ブロックに対する割合で設定します。
auto	ブラウザが自動的に調整します。(初期値)
値を継承しない

widthプロパティは幅を指定します。
heightプロパティは高さを指定します。
以下はMDNのwidthプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/width
以下はMDNのheightプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/height

サンプル

widthとheightのサンプルです。

外側の点線のブロックのwidthは300pxでheightは200pxです。
box1は、widthは300pxでheightは50pxを指定しています。
box2は、widthは50%、heightは40%を指定しています。
→%をpxになおす場合、包括ブロックに対する割合になるので
widthは300px/0.5 = 150px、heightは200px / 0.4 = 80pxになります。
box3は、autoを指定しています。

コード

上記サンプルのコードです。

<style>
#box1{
	width:300px;
	height:50px;
}
#box2{
	width:50%;
	height:40%;
}
#box3{
	width:auto;
	height:auto;
}
#box{width:300px;height:200px;border:1px dotted #000;}
#box div{border:1px solid #000;box-sizing:content-box;
background:LightCyan;}
</style>

<div id="box">
	<div id="box1">box1:<br /> width:300px,height:50px</div>
	<div id="box2">box2:<br /> width:50%,height:40%</div>
	<div id="box3">box3:width:auto,height:auto</div>
</div>