CSSで余白や位置の指定にパーセント値を使用する

marginやtranslateなどの値をパーセント値にした時の算出方法について確認する機会があったので、調べた内容をメモ。

サンプルコード

padding

まずはpaddingの場合ですが、上下左右方向ともに親要素の幅が基準になります。
まずは左右方向です。

<div class="wrap">
  <div class="content">
    <div class="box">サンプルテキスト</div>
  </div>
</div>

.contentに対してpaddingを設定します。
画面幅(親要素)750pxの時に40pxになるように指定してみます。

.content {
	padding-inline: calc(40 / 750 * 100%); /* 5.33333% */
	background-color: tomato;
}
.box {
	background-color: orange;
}

これで画面幅750pxの時は40px、倍の1500pxの時は80pxになりました。
paddingのデモページ

親要素の幅が基準になるので、.wrapの幅を可変にするとその幅に応じた値になります。
今回は50%で設定してみます。

.wrap {
	width: 50%;
	margin-inline: auto;
}
.content {
	padding-inline: calc(40 / 750 * 100%); /* 5.33333% */
	background-color: tomato;
}
.box {
	background-color: orange;
}

この場合、画面幅750pxの時.wrapは375pxとなり、その子要素のpaddingは20pxになりました。
paddingのデモページ2

次に上下方向も試してみます。
先ほどと同様、画面幅(親要素)750pxの時に上下40pxになるように指定してみます。

.content {
	padding-block: calc(40 / 750 * 100%);
	background-color: tomato;
}
.box {
	background-color: orange;
}

画面幅750pxの時は上下40px、倍の1500pxの時は80pxになりました。
paddingのデモページ3

.wrapの幅を50%に変更してみます。

.wrap {
	width: 50%;
	margin-inline: auto;
}
.content {
	padding-block: calc(40 / 750 * 100%); /* 5.33333% */
	background-color: tomato;
}
.box {
	background-color: orange;
}

この場合も先ほどと同様、画面幅750pxの時は.wrapは375px、その子要素のpaddingは20pxになりました。
paddingのデモページ4

margin

marginの場合もpaddingと同様、上下左右方向ともに親要素の幅が基準になります。

<div class="wrap">
  <div class="content">
    <div class="box">サンプルテキスト</div>
  </div>
</div>

paddingの時と同様、画面幅(親要素)750pxの時に上下左右40pxになるように指定してみます。

.wrap {
	background-color: tomato;
}
.content {
	margin-inline: calc(40 / 750 * 100%); /* 5.33333% */
	margin-block: calc(40 / 750 * 100%); /* 5.33333% */
	background-color: orange;
}

これで画面幅750pxの時は上下左右40px、倍の1500pxの時は80pxとなりました。
marginのデモページ

親要素の幅を50%にしてみます。

.wrap {
	width: 50%;
	margin-inline: auto;
	background-color: tomato;
}
.content {
	margin-inline: calc(40 / 750 * 100%); /* 5.33333% */
	margin-block: calc(40 / 750 * 100%); /* 5.33333% */
	background-color: orange;
}

この場合もpaddingの時と同様、親要素の幅が半分になった分marginの値も半分になりました。
marginのデモページ2

position

次は余白ではなく、positionを設定した際のtopやleftでの位置を試してみます。
leftとrightは配置の基準となる祖先要素の幅、topとbottomは配置の基準となる祖先要素の高さを元に算出されます。

<div class="content">
  <div class="box"></div>
</div>

.boxに対してtopとleftの設定を行います。
基準になる.contentの縦横比は1:2で伸縮するようにして、画面幅(親要素)750pxの時にtopもleftも40pxになるように指定してみます。

.content {
	position: relative;
	aspect-ratio: 2 / 1;
	background-color: tomato;
}
.box {
	position: absolute;
	top: calc(40 / (750 * 0.5) * 100%); /* 10.66667% */
	left: calc(40 / 750 * 100%); /* 5.33333% */
	width: 100px;
	aspect-ratio: 1 / 1;
	background-color: orange;
}

topとleftのデモページ

translate

最後にtranslateですが、X方向は自身の幅、Y方向は自身の高さが基準になります。
まずはX方向方向です。

<div class="content">
  <div class="box"></div>
</div>

.boxに対してtranslateを設定します。
.boxの幅は画面幅(親要素)の20%になるようにして、translateでその50%分X方向に移動するように指定してみます。

.content {
	background-color: tomato;
}
.box {
	width: 20%;
	aspect-ratio: 4 / 3;
	background-color: orange;
	translate: 50% 0;
}

これで画面幅750pxの時は.boxの幅は150pxになり、その50%の75px分右にずれました。
画面幅1500pxの時は.boxの幅は300pxで、150px分右にずれるようになります。
translateのX方向のデモページ

最後にtranslateのY方向です。

.content {
	background-color: tomato;
}
.box {
	width: 20%;
	aspect-ratio: 4 / 3;
	background-color: orange;
	translate: 0 50%;
}

これで自身の高さの半分だけ下にずれるようになりました。
translateのY方向のデモページ