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

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

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.

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>

I was faced with the same problem today. Apparently the solution is as simple as using :

padding: calc(*put fixed pixels here*px + *put your required %age here*%) 

Note that you do have to decrement the required %age a little to account for fixed pixels.

Unfortunately you cannot.
I tried using the CSS max function in padding to attempt this functionality, but I got a parse error in my css. Below is what I tried:

padding: 5px max(50vw - 350px, 10vw);

I then tried to separate the operations into variables, and that didn't work either

  --padding: calc(50vw - 350px); 
  --max-padding: max(1vw, var(--padding));
  padding: 5px var(--max-padding);

What eventually worked was just nesting what I wanted padded in a div with class "centered" and using max width and width like so

 .centered {
   width: 98vw;
   max-width: 700px;
   height: 100%;
   margin: 0 auto;
}

Unfortunately, this appears to be the best way to mimic a "max-padding" and "min-padding". I imagine the technique would be similar for "min-margin" and "max-margin". Hopefully this gets added at some point!

margin and padding don't have min or max prefixes. Sometimes you can try to specify margin and padding in terms of percentage to make it variable with respect to screen size.

Further you can also use min-width, max-width, min-height and max-height for doing the similar things.

Hope it helps.