Can we define min-margin and max-margin, max-padding and min-padding in css?

Question

Can we define min-margin and max-margin, max-padding and min-padding in CSS ?

Answer 1

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.

Answer 2

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 as max(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>