I Need a Max-Margin CSS Property, But It Doesn't Exist. How Could I Fake It

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.

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>

One-column layout with fluid sidebar and max-width main column

I'd go with something like what you have, but maybe get away from the floats and eliminate .left and .right altogether, then use media queries to manage the left margin:

http://jsfiddle.net/y2rd8/9

.body {
    max-width: 30em;
    border: 1px solid green;
    margin-right: 1em;
}
@media screen and (max-width: 480px) {
    .body {
        margin-left: 2em;
    }
}
@media screen and (min-width: 481px) {
    .body {
        margin-left: 4em;
    }
}

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

Why isn't my margin working with position: fixed?

i think you have to explictly declare the position of fixed div.

div.header {
position: fixed;
width: 100%;
background: #ffffff;
top:20px;
-webkit-box-shadow: 0 8px 6px -6px #333;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
}

and assign margin at the content div

div.contentwrap {
width: 80%;
height: 1600px;
background: #ccc;
margin: 80px auto;
}

check this fiddle if works like you need:
https://jsfiddle.net/0cmvg92m/3/

How to disable margin-collapsing?

There are two main types of margin collapse:

• Collapsing margins between adjacent elements
• Collapsing margins between parent and child elements

Using a padding or border will prevent collapse only in the latter case. Also, any value of overflow different from its default (visible) applied to the parent will prevent collapse. Thus, both overflow: auto and overflow: hidden will have the same effect. Perhaps the only difference when using hidden is the unintended consequence of hiding content if the parent has a fixed height.

Other properties that, once applied to the parent, can help fix this behaviour are:

• float: left / right
• position: absolute
• display: inline-block / flex

You can test all of them here: http://jsfiddle.net/XB9wX/1/.

I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width.

Sources: Sitepoint's article Collapsing Margins

A particular :hover effect

Yes it's possible.

Assign a class to the middle box, to enlarge it initially, and then remove that class as soon as you mouseover another box.

Edit - changed event binding from on to one, per @Kaiido's suggestion.

$('body').one('mouseover', '.box', function (event) {

  $('.box').removeClass('focussed');

});

body {

  padding: 50px;

}

.box {

  background-color: #fff;

  border: 1px solid #ddd;

  display: inline-block;

  height: 100px;

  width: 100px;

}

.box.focussed,

.box:hover {

  transform: scale(1.2)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>

<div class="box focussed"></div>

<div class="box"></div>

CSS text align right while still maintaining equal padding left and right

I hope i solved your problem. I set both padding padding-right:50px and padding-left:50px and still stay right according to your requirement.

Live Working Demo

Result:

---

Related Topics