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

问题

I have set a margin: 0 33% 0 0; however I would also like to make sure the margin is at least a certain px amount. I know there is no min-margin in CSS so I was wondering if I have any options here?

回答1:

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

回答2:

The true solution here is to use a media query break-point to determine when 33% no longer works for you and should be overridden by the minimum margin in pixels.

/*Margin by percentage:*/
div{
    margin: 0 33% 0 0;
}

/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
    div{
        margin: 0 15px 0 0;
    }
}

In the above code, change the max-width to whatever screen width the 33% right margin no longer works for you.

回答3:

you can try this

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}

回答4:

Carl Papworth, in this case, you can use this:

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}

回答5:

if you are using span than u have to do like this :

span{
display:block;
margin:auto;
}

working demo

if you are using div than u can do this :

div{
  margin:auto;
}

回答6:

How about this?

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}

回答7:

I've played with a couple of the aforementioned solutions, but in a fluid and truly responsive setting, I believe the best option is to set the proper padding on the respective container/wrapper. Example: Style:

 html {
   background-color: #fff;
   padding: 0 4em;
 }
 body {
   margin: 0 auto;
   max-width: 42em;
   background-color: #ddf;
 }

Now play around with various window widths, and also try various font sizes.

Also try the working demo.

回答8:

You could keep your items in a "container" div and set a padding exact to "min-margin" you'd like to have. It might not be exactly what you're looking for, but it gives you that sense of minimum margin size.

<div class="container">
   <div class="your_div_with_items">
   'items'
   </div>
</div>

Then the CSS:

.container
{
   padding: 0 'min_margin_ammount' 0 0;
}

.your_div_with_items
{
   margin: 0 33% 0 0;
}

回答9:

As far as I understand, you can place a div around your element, that defines a padding. A padding of an outer element is like the margin of an inner element.

Imagine you want at least a margin of 1px:

<div style="padding:1px">
  <div style="margin: 0 33% 0 0;">
      interesting content
  </div>
</div>

edit: this is like Imigas's answer, but I think easier to understand.

回答10:

It is also possible to test if a certain percentage of the screen width/height is smaller than a length in pixels.

Here is a simple solution for this using JavaScript:

<body>
 <div id="demo">
  <p> Hello World! </p>
 </div>

 <script>
  if (((window.innerWidth / 100) * 33) < 250) { /* Gets 33% of window width in pixels, tests if it is less than required minimum length (250px) */
  document.getElementById("demo").style.margin = "0 250px 0 0" /* If true, set margin to length in pixels */
  } else {
   document.getElementById("demo").style.margin = "0 33% 0 0" /* If not true, the widow is big enough and percentage length is set */
   }
 </script>
</body>

来源：https://stackoverflow.com/questions/6350645/using-a-percentage-margin-in-css-but-want-a-minimum-margin-in-pixels

标签

css

margin