How to 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>

Is it possible to define a min padding on a li?

You could use flexbox position to achieve the same result

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

Codepen demo

Optionally you may set a max-width to the list to create more space around the first and last list-item if needed, e.g.

ul {
  list-style: none;
  display: flex;
  max-width: 76%;
  margin: 0 auto; 
  padding: 0;
  justify-content: space-around;
}

Using a auto margin in css but want a minimum margin

If i saw your code & question may be you can write like this:

div{
 margin:5px 10% 5px 5%;
}

Check this for more http://jsfiddle.net/spVNu/1/

I need a max-margin CSS property, but it doesn't exist. How could I fake it?

Spacer divs on either side of the content divs. Those are your margins. Set their max width using the max-width property.

Using a percentage margin in CSS but want a minimum margin in pixels?

Place a div with a % width and a static min-width to the right of your element.

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">

How i can use min and max CSS functions to work with auto

Use margin-inline: max(30px,50% - 500px/2) and no need to set a max-width (more detail: https://twitter.com/ChallengesCss/status/1469270181205749771)

.navbar__menu {
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin-inline: max(30px,50% - 500px/2);
  background: red;
  display: flex;
}

<div class="navbar__menu">

</div>