レスポンシブで縦方向の間隔をコントロールする

img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。

padding-top = 高さ ÷ 幅 × 100％

幅400px、高さ300pxの場合

300px ÷ 400px × 100％ = 75%

padding-topを75％とすると、高さは幅の75％でコントロールされます。

親要素の横幅を基準にすることで、ウィンドウの幅が広い時には広く、狭い時には狭くというように間隔を調整することができます。

上下のmargin(%)=margin ÷ 親要素のコンテンツ幅 × 100％

上下のpadding(%)= padding ÷ 親要素のコンテンツ幅 × 100％