要素が生成するボックスの幅はwidthプロパティ、高さはheightプロパティによって変更することができます。ただし、インラインのボックスを生成する要素は widthプロパティも、heightプロパティは使えないので注意が必要です。

widthプロパティとheightプロパティの初期値「auto」

widthプロパティとheightプロパティが有効になるdisplayプロパティの値が「block」に指定されているときのボックスを見ていきましょう。

widthプロパティに何も指定しない場合の規定値は「auto」になっていて、ボックスの幅は親要素の幅いっぱいまで広がります。heightプロパティも何も指定しない場合、widthプロパティと同様にの規定値は「auto」になっていますが、縦いっぱいに広がるのではなく文字や画像などの要素の中身に依存して自動的に決まります。

次のコードは、p要素に背景色を指定して要素の生成するボックスの規定値の矩形領域がわかるように色を付けています。

<p>ボックスの幅は「width」プロパティによって変更することができます。</p>

p {
    background-color: #74a9f6;
}

widthプロパティとheightプロパティが指定されていないので、ボックスの幅は親要素の幅いっぱいまで広がり高さは中身音同じになっています。

widthプロパティの使い方

widthプロパティは「数値+単位」で指定することができます。単位には「px（ピクセル）」、「%（パーセント）」、「vw（viewport width）」などがあります。

widthプロパティをpxで指定する

単位に「px」を使用することで、親要素などの影響を受けることなくサイズを固定することができます。
次のコードでは、 widthプロパティの値にpxを単位にして指定しています。

p {
    background-color: #74a9f6;
    width: 300px;
}

widthプロパティを%で指定する

サイズを指定する単位に「%」を使って相対的に指定することもできます。%で指定すると親要素の幅に対しての比率でサイズを設定できます。 これはウィンドウのサイズや親要素のサイズによって可変するという意味になります。
次のコードは、 widthプロパティの値に%で指定しています。

<div class="parent">
    <div class="child">ボックスの幅は「width」プロパティによって変更することができます。</div>
</div>

.parent {
    width: 400px;
    border: 1px solid #000000;
}
.child {
    background-color: #74a9f6;
    width: 50%;
}

この例では親要素（.parent）の幅が400ピクセルに指定され、その子要素には50%を指定されています。%指定は親要素に対する比率ですので、子要素（.child）の幅の実際のサイズは200ピクセルということになります。

%での指定は、PCからスマートフォンまで画面幅に対応するためのレスポンシブサイトなどでは、画面サイズに合わせて要素の幅や高さを変える必要がある場合などに有効な設定方法です。

heightプロパティの使い方

heightプロパティをpxで指定する

heightプロパティも「数値+単位」で指定することができます。単位に「px（ピクセル）」を使用することで、要素の中身の影響を受けることなくサイズを固定することができます。

p {
    background-color: #74a9f6;
    width: 300px;
    height: 100px;
}

ただし、heightプロパティを指定するときには注意が必要です。ボックスがコンテンツの内容（テキストや画像の大きさ）よりも小さくなる値に設定をすると、その内容がボックスからはみ出してしまうことがあるからです。

次のコードは、クラス名「box」の要素にheightプロパティにボックスサイズが要素の内容であるテキストの高さよりも小さくなる値を設定しています。

<div class="box">コンテンツの中身よりもボックスを小さく指定すると表示の不具合が起こることがあります</div>
<div>次の要素の位置は前の要素のボックスの位置やサイズに依存します</div>

.box {
    background-color: #74a9f6;
    width: 300px;
    height: 50px;
}

この例を見るとにボックスから中身がはみ出てしまうだけでなく、続く要素がある場合、重なって表示されてしまっています。後ろに続く要素の位置は、前の要素のボックスの位置やサイズに依存しているので、このような表示の不具合が起こってしまいますのでheightプロパティを指定するときには注意が必要です。

heightプロパティを%で指定する

heightプロパティの値を%で指定するのは、widthプロパティと違い少し注意しなければなりません。%の指定は親要素に対して何%かを指定していることになります。つまり親要素に高さが指定されていなければ上手く高さが設定することができなのです。

<div class="parent">
    <div class="child">ボックスの高さは「height」プロパティによって変更することができます。</div>
</div>

.parent { /* 親要素に高さは指定されていない */
    width: 300px;
    border: 1px solid #000000;
}
.child {
    background-color: #74a9f6;
    height: 50%;
}

この例では親要素の高さが指定されていないので、ボックスの高さは内容のテキストに依存しており、子要素の「.child」に指定されたheightプロパティの指定が無効になっているのがわかります。

親要素にheightプロパティで高さの指定を追加します。

.parent {
    width: 300px;
    border: 1px solid #000000;
    height: 150px; /* 親要素に高さを指定 */
}
.child {
    background-color: #74a9f6;
    height: 50%;
}