CSSでmin-widthやmax-width同様にmin-marginやmax-marginを使いたい時があると思います。
つまり基本的にはvwなどでウィンドウ幅に合わせてmarginを可変にし、指定値以下や指定値以上にはしたくないというときですね。
しかし残念ながらCSSにmin-marginやmax-marginは用意されていないようです（2024/2/14時点）。
でも大丈夫、CSSにはmin関数・max関数という便利な関数が用意されており、これで同等の事を実現できます。
min関数
下記のようにmin関数の第一引数に基本サイズ、第二引数に最大サイズを指定してmax-marginを実現する事ができます。
<style>
.text1 {
margin-left: min(13vw, 140px);
}
</style>
<div class="text1">このブロックのmargin-leftは13vw、ただし最大140px。</div>
上記の場合基本サイズを13vwにしているので、ウインドウ幅に合わせてmarginが可変になります。
最大値を140pxにしているので、marginがそれ以上になることはありません。
PCの方は下記で動きをご確認いただけるので、ウィンドウ幅を変えてみてください。
min関数は第一引数と第二引数の内、小さい方を返します。
なので上記の場合第一引数の13vwが第二引数の140pxを超えた瞬間、140pxが適用されるため、最大140pxが実現できるというわけになります。
max関数
max関数の第一引数に基本サイズ、第二引数に最小サイズを指定してmin-marginを実現する事ができます。
<style>
.text2 {
margin-left: max(13vw, 110px);
}
</style>
<div class="text2">このブロックのmargin-leftは13vw、ただし最小110px。</div>
上記の場合、margin-leftが基本13vw、最小110pxになります。
PCの方は下記で動きをご確認いただけます。
max関数は第一引数と第二引数の内、大きい方を返します。
clamp関数
clamp関数はmin関数とmax関数を合わせたようなもので、最小サイズと最大サイズを一括で指定する事ができます。
clamp関数の形式は、clamp(最小サイズ, 基本サイズ, 最大サイズ)になります。
<style>
.text3 {
margin-left: clamp(110px, 13vw, 140px);
}
</style>
<div class="text3">このブロックのmargin-leftは13vw、ただし最小110px、最大140px。</div>
PCの方は下記で動きをご確認いただけます。
ScssやSassで使いたい場合
min関数やmax関数は、ScssやSassで同じことをしようとすると、下記のエラーがでてしまいます。
Incompatible units: ‘vw’ and ‘px’.
これはScssやSassにも同名の関数が定義されており、しかも挙動が違うために起きてしまうようです。
（詳しい挙動についてはこちらの記事がとてもわかりやすく解説してくれています。）
解決するのは簡単でunquote関数を使えばOKです。
.text1 {
margin-left: unquote('min(13vw, 140px)');
}以上、CSSでmin-marginやmax-marginを実現する方法でした。
他にもmin-padding、max-padding、min-fontsize、max-fontsizeなども同様の方法で実現できるので、試してみてください！
