【CSS】margin・paddingでのパーセントの使い方

margin・paddingは要素の空間を指定するCSSです。

パーセント（％）は親を基準とする単位です。

widthの％は親の横幅、heightの％は親の高さを基準としますが、margin・paddingは注意が必要です。

margin・paddingでのパーセントの使い方を解説します。

topもbottomも親の横幅が基準となる

margin-leftやpadding-rightなど横の要素であれば親の横幅が基準になるのはイメージがわくかと思いますが、margin-topやpadding-bottomなど縦の要素も親の横幅が基準となります。

下記は青が親要素であり、marginの範囲です。黄色が自身であり、paddingの範囲です。白は子要素であり、widthとheightの範囲です。

marginとpaddingはすべて10%にしています。

<style>
.example{
    border: 1px solid #333;
    background: #d3e3fc;
}
.example>div{
    /*コレ*/margin: 10%;
    /*コレ*/padding: 10%;
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    background: #fff73a;
}
.example>div>div{
    border: 1px solid #333;
    background: #ffffff;
    width: 100px;
    height: 100px;
}
</style>
<div class="example">
    <div>
        <div></div>
    </div>
</div>

親要素の縦と横のサイズは違うのにもかかわらず、marginとpaddingの縦も横も同じサイズになっています。

これはいずれも基準が同じであるため同じサイズになっているのです。

そしてその基準というのは親要素の横幅なのです。

※margin-rightが大きいように見えますが、左寄せになっているだけです。

【応用】幅を基準に高さを作れる

この特徴を利用して横幅を基準に高さを指定することができます。

heightで%指定すると親要素の高さを基準に高さが決まります。

ただ、横幅と縦の比率を一定にしたいときheightでは難しいです。

paddingなら横幅を基準にできるため、横幅に対する比率を一定にしたいときに便利です。

下記は「padding-top: 56%」を指定した例です。ブラウザ幅を変えても比率を維持します。

ちなみに「padding-top: 56%」は16:9にするときの方法です。

<style>
.example2{
    border: 1px solid #333;
    background: url(https://csshtml.work/wp-content/uploads/cat.jpg) 0/cover;
    padding-top: 56%;
    position: relative;
}
.example2>div{
    position: absolute;
    left: 0;
    top: 0;
}
</style>
<div class="example2"><div>子要素はabsoluteで浮かせる</div></div>

このときheightは0にします。高さはpaddingだけで決まるため、子要素のいる場所などありません。

子要素はposition: absoluteで浮かせてうまい具合に配置しましょう。

上記の例では画像の比率を保っていますが、他にもiframeでgooglemapやYouTubeを表示させるのにも役立つでしょう。

【まとめ】margin・paddingでのパーセントの使い方

margin-top、margin-bottom、padding-top、padding-bottomは親の横幅が基準となる。

応用としてpadding-top（またはbottom）を使って、横幅と一定の比率を保つ高さを指定できる。

以上、margin・paddingでのパーセントの使い方でした。