heightプロパティに指定できる値
heightプロパティには次の値を設定することができます。
値 | 内容 |
---|---|
auto | 初期値。自動的に計算された高さを適用。 |
数値 + 単位 | 任意の単位(px、em)で高さを指定。 |
数値 + % | 親要素に対する割合を指定。 |
使用例1: auto
「auto」を指定した場合の例です。
要素に必要な最低限の高さへと自動的に調整します。
CSS コード例
.parent {
height: 100px;
border: 1px solid #ccc;
}
.box1 {
height: auto;
background: #ffb7ca;
}
HTML コード例
<div class="parent">
<p class="box1">heightプロパティのテスト</p>
</div>
使用例2: 数値 + px
「数値 + px」で高さを指定した例です。
CSS コード例
.parent {
height: 100px;
border: 1px solid #ccc;
}
.box2 {
height: 80px;
background: #ffb7ca;
}
HTML コード例
<div class="parent">
<p class="box2">heightプロパティのテスト</p>
</div>
使用例3: 数値 + %
「数値 + %」で高さを指定した例です。
親要素の高さが100pxなので、「.box3」の高さは50pxになります。
CSS コード例
.parent {
height: 100px;
border: 1px solid #ccc;
}
.box3 {
height: 50%;
background: #ffb7ca;
}
HTML コード例
<div class="parent">
<p class="box3">heightプロパティのテスト</p>
</div>