デザインカンプから左右のpaddingが4%になっている根拠がわかりません。

Question

【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP

上記のサイトで模写コーディングの勉強をしています。

デザインカンプ

の数値をみながら、　何処の数値がどこか調べながらやっているのですが、

左右のpaddingが4%にする部分が何ピクセルになっているのかわかりません。

デザインカンプの横幅が　1280 ピクセルなので
その4%がそうかと思って計算すると
1280px 4%=51.2になり、数字があわないですし、

wrapper の960px に対してかとおもって
960px 4% でも38.4 になり、デザインカンプの数字と合いません。

左右のpadding 4% はどの数値をいっているのでしょうか？

それとも全体の４％　というpaddding の余白はデザインカンプに反映されない慣習的なものでしょうか？

デザインカンプURL

デモサイトURL

ソースコードURL

Answer 1

コンテンツの横幅は960pxで横のパディングは4%です。
とあるので、960pxに対しての4%です。
paddingなので、38.4pxの余白2つ分、つまり38.4px + 38.4px + 883.2px = 960pxということになります。
また、「デザインカンプ」とあるので、ここでのデザインデータはレイアウトや完成形の見本であり、それのピクセル通りにコーディングすることを想定したものではありません。（デザインと全く同じピクセル数でコーディングすることを「ピクセルパーフェクト」と呼んだりしますが、ここでは別途コーディング仕様が定められているので該当しません）

Comments

[niconic73027793]

そういう計算式だったんですね。
960px の外の余白を見てしまっていました。
ありがとうございました<(_ _)>

Answer 2

sectionのことでしたら、親要素であるmainの4%ではないですかね。