| 属性名 | inset |
|---|---|
| 値 | [auto | <length> | <percentage>]{1,4} |
| 初期値 | auto |
| 適用可能要素 | 位置指定可能要素 |
| 継承 | なし |
| メディア | visual |
| アニメーション | 可能 |
top, bottom, right, left を同時に指定します。
| 値 | 説明 |
|---|---|
| <length> | 距離を長さで指定します。詳細は <length> を参照してください。 |
| <percentage> | 距離をパーセントで指定します。 |
| auto | 自動計算します。 |
値を 1～4個指定可能で、それぞれ次のように解釈されます。
inset: 1rem; /* inset: 上下左右 */ inset: 1rem 2rem; /* inset: 上下 左右 */ inset: 1rem 2rem 3rem; /* inset: 上 左右 下 */ inset: 1rem 2rem 3rem 4rem; /* inset: 上 右 下 左 */
.box {
height: 4rem;
}
.test {
position: relative;
inset: 1rem 2rem;
width: 2rem;
height: 2rem;
border: 1px solid #999;
text-align: center;
}
<div class="box"> <div class="test">A</div> </div>