幅・高さ
height
高さを指定する
| value | description |
|---|---|
100px | pxで幅を指定する |
20rem | remで幅を指定する |
100% | %で幅を指定する |
Demo
height: 100%;
height: 300px;
height: 200px;
height: 100px;
<div class="wrapper">
<div class="box box-1">height: 100%;</div>
<div class="box box-2">height: 300px;</div>
<div class="box box-3">height: 200px;</div>
<div class="box box-4">height: 100px;</div>
</div>
.box-1 {
height: 100%;
}
.box-2 {
height: 300px;
}
.box-3 {
height: 200px;
}
.box-4 {
height: 100px;
}
.box {
border-radius: 12px;
color: white;
font-family: monospace;
font-weight: 700;
display: flex;
padding: 8px 16px;
margin-bottom: 8px;
background: rgb(14, 165, 233);
white-space: nowrap;
flex: 1;
margin-right: 12px;
}
.wrapper {
display: flex;
align-items: flex-start;
height: 240px;
}
概要
要素の高さを指定します。px, rem, %等で指定します。