Can we define min-margin
and max-margin
, max-padding
and min-padding
in CSS ?
I wrote a library to do this, you can view it here: https://codepen.io/nicetransition/pen/OyRwKq
to use in your case:
.selector {
scale($context, $base-size, $limit-size-min, $limit-size-max, $property: padding-right);
scale($context, $base-size, $limit-size-min, $limit-size-max, $property: padding-left);
}
$context
: Max-width of your container
$base-size
: Root font size
$limit-size-min
: The minimum size
$limit-size-max
: The maximum size
.selector { scale(1400px, 16px, 5px, 20px, $property: padding-right); scale(1400px, 16px, 5px, 20px, $property: padding-left); }
This would scale down to 5px and up to 20px, between 5-20 it is dynamic based of vw
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!
Comming late to the party, as said above there unfortunately is no such thing as max-margin. A sollution that helped me is to place a div above the item you want to have the max-margin applied to.
<body style="width:90vw; height:90vh;">
<div name="parrentdiv/body" style="width:300px; height:100%; background-color: blue">
<div name="margin top" style="width:300px; height:50%; min-height:200px; background-color: red"></div>
<div name="item" style="width:300px; height:180px; background-color: lightgrey">Hello World!</div>
</div>
</body>
Run above coded snippet in full page and resize the window to see this working. The lightgreypart will have the margin-top of 50% and a 'min-margin-top' of 200px. This margin is the red div (wich you can hide with display: none; if you want to). The blue part is what's left of the body.
I hope this will help people with the same problem in the future.
I use this hack of defining the minimum margin required then the auto example:
margin-left: 20px+auto;
margin-right: 20px+auto;
this makes a minimum cushion area and automatically align the view
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.
@vigilante_stark's answer worked for me. It can be used to set a minimum "approximately" fixed margin in pixels. But in a responsive layout, when the width of the page is increasing margin can be increased by a percentage according to the given percentage as well. I used it as follows
example-class{
margin: 0 calc(20px + 5%) 0 0;
}