height、width、max-height、max-width、min-height、min-width : 高さと幅 - CSSプロパティ - Web開発


.parent {
    border:     solid orange;   /*  境界線 */
    padding:    1em;            /*  内側の余白 */
}

.child {
    border:     solid red;      /*  境界線 */
    background-color:   #fcc;   /*  背景色 */
}

HTML : 適用するHTML


<div class="parent">
    <div class="child">
        child
    </div>
</div>

実行結果

child

概要

ボックス（ブロック）の高さと幅を指定する。

設定	固定値	最大	最小
高さ	`height`	`max-height`	`min-height`
幅	`width`	`max-width`	`min-width`

なお、これらの値を設定すると、子要素（や含まれる文字列）がはみ出す場合がある。
はみ出しに対する設定はoverflow | text-overflow | resize : はみ出し／省略記号／リサイズを参照。

`height` : 高さ

heightでボックスの高さを指定できる。

CSS : height


.child  {
    height:   10em;
}

実行結果

child

%で指定する

親要素（.parent）の高さに対する割合を%で指定することができる。

CSS : height


.parent  {
    height:   10em;
}

.child  {
    height:   50%;
}

実行結果

child

`width` : 幅

widthでボックスの幅を指定できる。

CSS : width


.child  {
    width:   15em;
}

実行結果

child

%で指定する

親要素（.parent）の幅に対する割合を%で指定することができる。

CSS : height


.parent  {
    width:   15em;
}

.child  {
    width:   50%;
}

実行結果

child

最大値／最小値を指定する

設定	固定値	最大	最小
高さ	`height`	`max-height`	`min-height`
幅	`width`	`max-width`	`min-width`

応用になるが、最大値／最小値を使うとリサイズ（resize）の上下限を設定することもできる。

CSS : リサイズの上下限


.sample {
    overflow:   hidden;
    resize:     both;

    width:      15em;
    height:     15em;
    max-width:  20em;
    max-height: 20em;
    min-width:  10em;
    min-height: 10em;

    border:     2px solid red;
    background-image: linear-gradient( to top left, #eee 10%, red ); 
}

HTML : 適用するHTML


<div class="sample">
    リサイズ可能（10em ～ 20em）
</div>

実行結果

リサイズ可能（10em ～ 20em）

`max-height` : 高さの最大値

子要素（.child）にmax-height: 10emを指定した。

４行であれば10emの高さに収まっている。

CSS : max-height


.child  {
    max-height:  10em;
}

HTML : 適用するHTML


<div class="parent">
    <div class="child">
        line 1<br>
        line 2<br>
        line 3<br>
        line 4<br>
    </div>
</div>

実行結果

line 1
line 2
line 3
line 4

８行にした場合、10emの高さまでは広がるが、そこに収まらない行ははみ出す。（ overflowプロパティを参照）

CSS : max-height


.child  {
    max-height:  10em;
}

HTML : 適用するHTML


<div class="parent">
    <div class="child">
        line 1<br>
        line 2<br>
        line 3<br>
        line 4<br>
        line 5<br>
        line 6<br>
        line 7<br>
        line 8<br>
    </div>
</div>

実行結果

line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8

`min-height` : 高さの最小値

子要素（.child）にmin-height: 10emを指定した。

この結果はheight: 10emの場合と同じ。

CSS : min-height


.child  {
    min-height:  10em;
}

HTML : 適用するHTML


<div class="parent">
    <div class="child">
        child
    </div>
</div>

実行結果

child

HTMLコードの文字列を８行にした場合、10em以上の高さが必要であるがmin-heightなので、自動的に高くなる。

CSS : min-height


.child  {
    min-height:  10em;
}

HTML : 適用するHTML


<div class="parent">
    <div class="child">
        line 1<br>
        line 2<br>
        line 3<br>
        line 4<br>
        line 5<br>
        line 6<br>
        line 7<br>
        line 8<br>
    </div>
</div>

実行結果

line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8

これをmin-heightではなくheightにした場合、そこに収まらない行ははみ出す。（ overflowプロパティを参照）

CSS : height


.child  {
    height:   10em;
}

HTML : 適用するHTML


<div class="parent">
    <div class="child">
        line 1<br>
        line 2<br>
        line 3<br>
        line 4<br>
        line 5<br>
        line 6<br>
        line 7<br>
        line 8<br>
    </div>
</div>

実行結果

line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8

`max-width` : 幅の最大値

子要素（.child）にmax-width: 15emを指定した。

.childはブロック要素（<div>）なので、15em以内であれば横に広がる。

CSS : max-width


.parent  {
    width:      15em;
}

.child  {
    max-width:  15em;
}

実行結果

child

親要素（.parent）を広くしてみた。

子要素は15emまでは広がるが、それ以上は広がらない。

CSS : max-width


.parent  {
    width:      25em;
}

.child  {
    max-width:  15em;
}

実行結果

child

`min-width` : 幅の最小値

子要素（.child）にmin-width: 10emを指定した。

.childはブロック要素（<div>）なので、10em以上であれば自動的に横に広がる。

CSS : min-width


.parent  {
    width:      20em;
}

.child  {
    min-width:  10em;
}

実行結果

child

親要素（.parent）を狭くしてみた。

子要素は10emまでは縮まるが、それ以上は縮まらない。今の場合、親要素の幅が8emなのではみ出している。

CSS : min-width


.parent  {
    width:      8em;
}

.child  {
    min-width:  10em;
}

実行結果

child

Emmet : `h` `w`

記述	Visual Studio Code
`h`	`height: ;`
`w`	`width: ;`
`mah`	`max-height: ;`
`mih`	`min-height: ;`
`maw`	`max-width: ;`
`miw`	`min-width: ;`

リンク

overflow | text-overflow | resize : はみ出し／省略記号／リサイズ

概要

height : 高さ

width : 幅

最大値／最小値を指定する

max-height : 高さの最大値

min-height : 高さの最小値

max-width : 幅の最大値

min-width : 幅の最小値

Emmet : h w

リンク

`height` : 高さ

`width` : 幅

`max-height` : 高さの最大値

`min-height` : 高さの最小値

`max-width` : 幅の最大値

`min-width` : 幅の最小値

Emmet : `h` `w`