大阪市北区のホームページ制作会社

CSSで%を指定する時に何が基準になるか

公開日:2022/09/22 更新日:2022/10/05

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

padding/margin

親要素の横幅基準

translate

自分の要素の大きさ基準

position:absolute;

親要素のそれぞれ縦横

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

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

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

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

上杉 洋

1991年生まれ。株式会社ステップバイワーク代表。2013年からホームページ制作の業界に入り、以後フリーランスを経て2022年に起業。 独自の理論で費用対効果の高いホームページを作るため日々精進しています。