[CSS] How to set min-margin and max-margin

There are times when you want to use min-margin and max-margin as well as min-width and max-width in CSS.
In other words, you basically want to make the margin variable according to the window width, such as vw, and you don’t want it to be less than or greater than a specified value.

Unfortunately, however, CSS does not seem to provide min-margin or max-margin (as of 2/14/2024).


But don’t worry, CSS provides convenient functions called min() and max() that can accomplish the same thing.





min function

You can achieve max-margin by specifying the base size as the first argument and the maximum size as the second argument in the min function, as shown below.

<style>
    .text1 {
        margin-left: min(13vw, 140px);
    }
</style>
<div class="text1">The margin-left for this block is 13vw, but max 140px</div>


In the above case, the basic size is set to 13vw, so the margin is variable according to the window width.
Since the maximum value is set to 140px, the margin will never be larger than that.



For PC users, you can check the functionality below, so please try changing the window width.

The margin-left for this block is 13vw, but max 140px




This may seem confusing because we are using the min function to achieve max-margin, but this may be understood if you know how the min function works.

The min function returns the smaller of the first and second arguments.
So in the above case, the moment 13vw of the first argument exceeds 140px of the second argument, 140px is applied, and thus a “max 140px” can be realized.







max function

You can achieve min-margin by specifying the base size as the first argument and the minimum size as the second argument in the max function, as shown below.

<style>
    .text2 {
        margin-left: max(13vw, 110px);
    }
</style>
<div class="text2">The margin-left for this block is 13vw, but minimum 110px</div>


In the above case, margin-left is base 13vw, minimum 110px.



For PC users, you can check the functionality below.

The margin-left for this block is 13vw, but minimum 110px



You might find this confusing as well, but understanding how the max function works can make it clearer.

The max function returns the larger of the two arguments.
In the above case, the moment the first argument of 13vw falls below the second argument of 110px, 110px is applied, and thus a “min 110px” is achieved.







clamp function

The clamp function is like a combination of the min and max functions, allowing the minimum and maximum sizes to be specified at once.
The format of the clamp function is “clamp(minimum size, basic size, maximum size)“.

<style>
    .text3 {
        margin-left: clamp(110px, 13vw, 140px);
    }
</style>
<div class="text3">The margin-left for this block is 13vw, with minimum 110px and maximum 140px</div>


For PC users, you can check the functionality below.

The margin-left for this block is 13vw, with minimum 110px and maximum 140px







In the case for achinving in Scss or Sass

The min and max functions will give the following error if you try to do the same thing in Scss or Sass.
Incompatible units: ‘vw’ and ‘px’.

This seems to happen because Scss and Sass also define functions with the same name, but with different behavior.



The solution is simple and can be done with the unquote function.

.text1 {
    margin-left: unquote('min(13vw, 140px)');
}







That is all, it was about how to set min-margin and max-margin in CSS.


Other methods such as min-padding, max-padding, min-fontsize, max-fontsize, etc. can be achieved in the same way, so please try them!

Sponsored Link

You can subscribe by SNS

Sponcerd Link

Leave a Reply

*