HTML & CSS

heightプロパティ

  1. 最終更新日:
  2. 公開日:

heightプロパティは要素の高さを指定するプロパティです。

  • 初期値

    auto

  • 継承

    不可

  • 適用できる要素

    テーブルの行を除く全要素

heightプロパティに指定できる値

heightプロパティには次の値を設定することができます。

内容
auto初期値。自動的に計算された高さを適用。
数値 + 単位任意の単位(pxem)で高さを指定。
数値 + %親要素に対する割合を指定。

使用例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>
autoの例
表示例

使用例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>
autoの例
表示例

使用例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>
autoの例
表示例

記事一覧