Using a Percentage Margin in CSS But Want a Minimum Margin in Pixels

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">

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/

css min-margin for vertical margins

http://jsfiddle.net/p2mdj/

Is that what you want? I removed the...

float: left;

because table-cells automatically figure that out and added a

min-width: 400px

to your main div.

It's now basically a standard table with a minimum width for each cell specified. Tables will pretty much never wrap their cells unless you do some weird stuff (like put floats on them :P)

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 set the minimum value of a margin set by a percentage using CSS?

You can use media queries to achieve your goal.

If you have a div that takes up most of the screen, except for the 20% margin on the left, and you want that margin to be no less than 100px, then you can use a media query to set the margin to 100px when the frame width becomes less than 500px (20% of 500px is 100px).

If your HTML is this

<body>
    <div class="left-margin">
        My left margin is 20% unless that would become less than 100px, in which
        case, my left margin would become 100px.
    </div>
</body>

Then your CSS could look like this

body, html
{
    margin: 0;
    padding: 0;
}

.left-margin
{
    margin-left: 20%;
}

@media screen and (max-width: 500px)
{
    .left-margin
    {
        margin-left: 100px;
    }
}

This basically means that everything inside the media query is only applied with frame widths of 500px or less. When the screen width becomes larger than 500px, the contents of the media query are ignored, and the margin becomes 20%.

http://jsfiddle.net/5g16xbtg/

I thought using a percentage in margin would be responsive

The percentage is based of the parent container width.

Here, if you want them to always be centered you could put them into a parent container and then give that a width, then have that set to margin auto to center it.

so something like this should work

html

<div class="footer">
   <div class="logo-container">
     <img src="logo/path" class="logo">
     <img src="logo/path" class="logo">
     <img src="logo/path" class="logo">
   </div>
</div>

css

.footer {
  width: 100%;
}

.logo-container {
  margin: auto;
  width: 320px;
  text-align: center;
 /* you can set this to the lowest bound, 
  * or you can change this based on breakpoint
  */
}

.logo {
  margin: 0 10px; /*or whatever spacing you need*/
}

As stated in the comments you could either set the width to the minimum width (assuming it fits to the smallest screen size/etc). Above we're doing 2 things. 1 putting the images in a container, and then having them center w/ text-align: center. Then we take that container, and center align it using margin:auto.

here's an ex fiddle: http://jsfiddle.net/7med35md/

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.

margin-top in percentage not working as expected

The point is that a percentage value for top/bottom margin/padding properties is relative to the width of the box's containing block. It doesn't respect the height of the parent element.

8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

<percentage> The percentage is calculated with respect to the width
of the generated box's containing block. Note that this is true for
margin-top and margin-bottom as well. If the containing block's
width depends on this element, then the resulting layout is undefined
in CSS 2.1.

As you are using absolute positioning, try using top: 99% instead in which a percentage value refers to the height of the box's containing block.

Using a Percentage Margin in CSS But Want a Minimum Margin in Pixels