CSS Min-margins Are Possible

Posted

CSS has had minimum values for certain properties. There are min-width and min-height properties that have been available for some time now. There will even soon be a min-font-size property someday in the future. But to date there is not a true min-margin property. Well, the good news is, you can achieve min-margins pretty easily using standard CSS!

Min-margins can be created by margins and max-width working in tandem. Calc is the magic fairy dust. It works like this on a sample div:

div{
  margin: 0 auto;
  max-width: calc(100% - 2em);
}

The 2em value in the max-width calculation is the total margin size on both sides combined. In the above example, there will always be at least 1em of margin space on either side of the div. The auto horizontal margins ensure the div will be centered, and the max-width will ensure that the div will never get too wide (in other words, there will always be a minimum margin).

If you set an explicit width, the div will respect it unless the container is smaller than that. At that point, the max-width property takes over. An explicit min-width, however, can override the min-margins.

This will work in every browser.* I use min-margins right here on this site!

To play around with it, check out my min-margin demo on Codepen.

There you have it. Min-margins! Easy!

*(I feel like I don’t need to add an IE 8 disclaimer anymore. I hope none of you are still supporting that browser. But… this doesn’t work in IE 8 and below.)

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →