Can we define min-margin and max-margin, max-padding and min-padding in css?
UPDATE 2020
With the new (yet in Editor's draft) CSS 4 properties you can achieve this by using min()
and max()
(also you can use clamp()
as a - kind of - shorthand for both min()
and max()
clamp(MIN, VAL, MAX)
is resolved asmax(MIN, min(VAL, MAX))
min()
syntax:
min( <calc-sum># ) where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
max()
syntax:
max( <calc-sum># ) where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
clamp()
syntax:
clamp( <calc-sum>#{3} ) where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]* where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]* where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
Snippet
.min {
/* demo */
border: green dashed 5px;
/*this your min padding-left*/
padding-left: min(50vw, 50px);
}
.max {
/* demo */
border: blue solid 5px;
/*this your max padding-left*/
padding-left: max(50vw, 500px);
}
.clamp {
/* demo */
border: red dotted 5px;
/*this your clamp padding-left*/
padding-left: clamp(50vw, 70vw, 1000px);
}
/* demo */
* {
box-sizing: border-box
}
section {
width: 50vw;
}
div {
height: 100px
}
/* end of demo */
<section>
<div class="min"></div>
<div class="max"></div>
<div class="clamp"></div>
</section>
Old Answer
No you can't.
margin
and padding
properties don't have the min
/max
prefixes
An approximately way would be using relative units (vh
/vw
), but still not min/max
And as @vigilante_stark pointed out in the answer, the CSS calc()
function could be another workaround, something like these:
/* demo */
* {
box-sizing: border-box
}
section {
background-color: red;
width: 50vw;
height: 50px;
position: relative;
}
div {
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0
}
/* end of demo */
.min {
/* demo */
border: green dashed 4px;
/*this your min padding-left*/
padding-left: calc(50vw + 50px);
}
.max {
/* demo */
border: blue solid 3px;
/*this your max padding-left*/
padding-left: calc(50vw + 200px);
}
<section>
<div class="min"></div>
<div class="max"></div>
</section>
Yes, you can!
Or if not those terms exactly, then at least the next best thing. In 2020 this is now very straightforward using the CSS math functions: min(), max(), and clamp().
A min
calculation picks the smallest from a comma separated list of values (of any length). This can be used to define a max-padding or max-margin rule:
padding-right: min(50px, 5%);
A max
calculation similarly picks the largest from a comma separated list of values (of any length). This can be used to define a min-padding or min-margin rule:
padding-right: max(15px, 5%);
A clamp
takes three values; the minimum, preferred, and maximum values, in that order.
padding-right: clamp(15px, 5%, 50px);
MDN specifies that clamp is actually just shorthand for:
max(MINIMUM, min(PREFERRED, MAXIMUM))
Here is a clamp
being used to contain a 25vw
margin between the values 100px
and 200px
:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
border: 2px dashed red;
}
.margin {
width: auto;
min-width: min-content;
background-color: lightblue;
padding: 10px;
margin-right: clamp(100px, 25vw, 200px);
}
<div class="container">
<div class="margin">
The margin-right on this div uses 25vw as its preferred value,
100px as its minimum, and 200px as its maximum.
</div>
</div>
The math functions can be used in all sorts of different scenarios, even potentially obscure ones like scaling font-size
- they are not just for controlling margin and padding. Check out the full list of use cases at the MDN links at the top of this post.
Here is the caniuse list of browser support. Coverage is generally very good, including almost all modern browsers - with the exception, it appears, of some secondary mobile browsers although have not tested this myself.