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

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

width / height プロパティ

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

コード

widthとheightのサンプルのコードです。
2行目の#box1はpx、6行目の#box2は%、10行目の#box3はautoを指定しています。

<style>
#box1{
	width:200px;
	height:100px;
}
#box2{
	width:50%;
	height:30%;
}
#box3{
	width:auto;
	height:auto;
}
#box{width:300px;height:200px;border:1px dotted #000;}
#box div{border:1px solid #000;box-sizing:content-box;}
</style>
<body >
<div id="box">
<div id="box1">box1:<br /> width:200px,height:100px</div>
<div id="box2">box2:<br /> width:50%,height:30%</div>
<div id="box3">box3:width:auto,height:auto</div>
</div>
</body>

サンプル

上記コードのサンプルです。
box2は、幅150px,高さ60pxとなっています。
(上記コードの14行目の包括ブロックの幅と高さは300pxと200pxのため)

box1:
width:200px,height:100px
box2:
width:50%,height:30%
box3:width:auto,height:auto

関連の記事

CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)




△上に戻る