发表新帖
发表新帖

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

后端 未结
关注
19 1495
情话喂你
情话喂你 2021-01-31 01:01

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

相关标签:
19条回答
  • 情话喂你
    2021-01-31 01:31

    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

    0 讨论(0)
  • 长情又很酷
    2021-01-31 01:33

    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!

    0 讨论(0)
  • Happy的楠姐
    2021-01-31 01:33

    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.

    0 讨论(0)
  • 时光说笑
    2021-01-31 01:33

    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

    0 讨论(0)
  • 庸人自扰
    2021-01-31 01:35

    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.

    0 讨论(0)
  • 北恋
    2021-01-31 01:38

    @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;
}
    0 讨论(0)
 看不清?
提交回复
热议问题