widthとheightでボックスの幅と高さを指定する【CSS】

width・heightは、ボックスの幅と高さを指定するプロパティです。

{width: 幅;}
{height: 高さ;}

値の指定方法

widthプロパティやheightプロパティでは、auto・%値・単位付き数値などで指定します。

autoを指定すると、内容に合わせて自動的に計算され、%値は親要素に対する割合で指定されます。

{width: 250px;}
{height: 150px;}

width(幅)250px
height(高さ)150px

max-widthプロパティやmax-heightプロパティで、ボックスの幅・高さの最大値を指定することができます。

{max-width: 最大の幅;}
{max-height: 最大の高さ;}

値は%値や単位付きの数値で指定し、%値は親要素に対する割合となります。

min-widthプロパティやmin-heightプロパティで、ボックスの幅・高さの最小値を指定することができます。

{min-width: 最小の幅;}
{min-height: 最小の高さ;}

値は%値や単位付きの数値で指定し、%値は親要素に対する割合となります。

また、「inherit」という値を指定すると、親要素の幅・高さの値を継承します。