ホームページのコーディングをしていてCSSで％を使う時に何を基準に値が決まるのか、ということが気になったので調べてみました

padding/margin

親要素の横幅基準

translate

自分の要素の大きさ基準

position:absolute;

親要素のそれぞれ縦横

gapに％指定した場合の考察

marginやpaddingと違いgapの場合は親要素の縦横それぞれの幅が基準になります。

単純に親要素の縦横それぞれの割合で決まるのは直感的でわかりやすいですが、marginやpaddingが親要素の横幅のみが基準になることを考えると逆にややこしい気もします。

まずmarginがなぜ親要素の横幅のみを基準にするかというと、親要素の高さを基準にしてしまうとその要素の上下marginを指定した場合、その親要素の高さも変わってしまうので無限ループが発生するからじゃないかと思いました笑